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到 
mi 


本 书 将 介绍 React Native， 一 款 由 Facebook 公司 出 品 的 用 来 构建 移动 应 用 的 JavaScript 框 
架 。 在 React Native 中 利用 现 有 的 JavaScript 和 React 知识 ， 就 可 以 开发 和 部 署 功能 齐全 
的 、 真 正 原生 的 移动 应 用 ， 并 同时 支持 iOS 与 Android 平台 。 采 用 JavaScript 作为 开发 语 
言 并 不 意味 着 需要 退 而 求 其 次 ， 相 反 ，React Native 在 不 牺牲 原生 样式 和 体验 的 前 提 下 ， 
相 比 传统 移动 开发 仍然 有 很 多 优势 。 


我 们 将 从 基础 开始 学 习 ， 然 后 逐步 深入 ， 最 终 部 署 一 款 100% 代码 复 用 的 成 熟 的 移动 应 用 
到 iOS 应 用 商店 和 Google Play 商店 。 除 了 框架 本 身 的 概念 讲解 之 外 ， 我 们 还 将 讨论 如 何 
使 用 第 三 方 库 ， 以 及 如 何 编写 自己 的 Java 或 Objective-C 的 React Native 扩展 。 








如 果 你 想 从 前 端 工程 师 或 Web 开发 者 的 视角 接触 移动 应 用 开发 ， 那 么 本 书 就 是 为 你 量 身 定 
做 的 。React Native 是 一 款 令 人 惊奇 的 框架 ， 愿 你 怀 着 和 我 一 样 喜悦 的 心情 来 探索 它 。 


预备 知识 


本 书 总 体 上 不 是 介绍 React 的 ， 我 们 假设 你 对 React 已 经 有 一 些 了 解 。 如 果 你 从 未 接触 过 
React， 我 建议 你 在 正式 开始 学 习 移 动 开 发 之 前 先 阅读 一 两 篇 相关 的 教程 ， 尤 其 应 该 熟悉 
React 的 属性 (props) 和 状态 (state)、 组 件 的 生命 周期 以 及 如 何 创建 React 组 件 等 知识 。 

















同时 ， 我 们 也 会 使 用 一 些 ES6 和 JSX 的 语法 。 如 果 你 对 这 些 还 不 太 熟 悉 也 没有 关系 ， 我 
们 将 在 第 2 章 讲解 JSX， 在 附录 A 中 介绍 ES6 的 语法 。 这 些 语法 本 质 上 与 你 习惯 的 
JavaScript 代码 是 一 对 一 的 解析 关系 。 


本 书 假设 你 使 用 OS X 操作 系统 进行 开发 。 开 发 iOS 应 用 必须 使 用 OS X 操作 系统 。 使 
用 Linux 和 Windows 开发 Android 应 用 的 支持 工作 仍 在 进行 中 ， 你 可 以 在 官网 (http:/ 
facebook.github.io/react-native/docs/linux-windows-support.html) 阅读 更 多 关于 Linux 与 
Windows 支持 的 相关 内 容 。 
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排版 约定 
本 书 使 用 了 下 列 排 版 约定 。 


。 档 体 
表示 新 术语 。 





。 等 宽 字 体 (Constant width) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 语 
句 和 关键 字 等 。 


。 加 粗 等 宽 字体 (Constant width bold) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 


。 等 宽 斜 体 (Constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确定 的 值 替 换 的 文本 。 








图 标 表示 提示 或 建议 。 





Ke 








该 图 标 表示 一 般 注 记 。 











使 用 代码 示例 


补充 材料 (代码 示例 、 练 习 等 ) 可 以 从 https://github.com/bonniee/learning-react-native 下 载 。 

















本 书 是 要 帮 你 完成 工作 的 。 一 般 来 说 ， 如 果 本 书 提供 了 示例 代码 ， 你 可 以 把 它 用 在 你 的 程 
序 或 文档 中 。 除 非 你 使 用 了 很 大 一 部 分 代码 ， 否 则 无 需 联 系 我 们 获得 许可 。 比 如 ， 用 本 书 
的 几 个 代码 片段 写 一 个 程序 就 无 需 获 得 许可 ， 销 售 或 分 发 O'Reilly 图 书 的 示例 光盘 则 需要 
获得 许可 ;引用 本 书 中 的 示例 代码 回答 问题 无 需 获得 许可 ， 将 书 中 大 量 的 代码 放 到 你 的 产 














-> 


xii | 前 言 
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品 文档 中 则 需要 获得 许可 。 


我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 明 一 般 包括 书 
名 、 作 者 、 出 版 社 和 ISBN。 比 如 :“Zearning React Native by Bonnie Eisenman (O’Reilly). 
Copyright 2016 Bonnie Eisenman, 978-1-491-92900-1”。 














如 果 你 觉得 自己 对 示例 代码 的 用 法 超出 了 上 述 许可 的 范围 ， 欢 迎 你 通过 permissions@ 
oreilly.com 与 我 们 联系 。 


Safari2 Books Online 


Safari Books Online (http:/www.safaribooksonline.com) 是 应 运 

Sa fa TL 而 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 

Books Online 技术 和 商务 作家 的 专业 作品 。 | 软件 开发 人 员 、Web 

设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问题 、 学 习 和 认证 培训 时 ， 都 将 
Safari Books Online 视 作 获取 资料 的 首选 渠道 。 












































对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 OReilly Media、Prentice 
Hall Professional、 Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 





Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones 多 Bartlett、Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 


























O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 


北京 市 西城 区 西直门 南大 街 2 号 成 馈 大 厦 C 座 807 室 (100035) 
奥 莱 利 技术 咨询 (北京 ) 有 限 公 司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘 误 表 、 示 例 
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代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://shop.oreilly.com/product/0636920041511.do 


对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 ; bookquestions@oreilly.com 








要 了 解 更 多 O’Reilly 图 书 、 培 训 课 程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 














我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : http:/www.youtube.com/oreillymedia 


资源 
单枪匹马 会 让 学 习 过 程 变 得 困难 ; 虽然 事实 并 不 一 定 如 此 ， 但 你 不 一 定 要 这 样 做 。 这 里 有 
一 些 资源 ， 也 许 在 阅读 过 程 中 会 给 你 带 来 一 些 帮 助 。 


。 本 书 中 所 有 的 代码 示例 都 在 GitHub 代码 仓库 中 (https://github.com/bonniee/learning- 
react-native) ， 如 果 在 学 习 过 程 中 遇 到 困难 或 者 需要 代码 的 上 下 文 ， 不 妨 看 看 这 里 。 

。 加 入 LearningReactNative.com (http:Wlearningreacnative.com) 的 邮件 列表 获取 后 续 的 文 
章 、 建 议和 实用 的 资源 。 

。 官方 文档 (https://facebook.github.io/react-native/) 中 有 大 量 优秀 的 参考 资料 。 









































此 外 ，React Native 社区 也 是 实用 的 资源 : 


。 Brent Vatne 的 React Native newsletter (http://brentvatne.ca/react-native-newsletter/ ) 
。 Stack Overflow 上 的 react-native 标签 分 类 (http://stackoverflow.com/questions/tagged/react-native) 


。 Freenode 上 的 #eactnative 小 组 (irc://chat.freenode.net/reactnative) 
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写成 本 书 离 不 开 大 家 的 帮助 和 支持 。 首 先 要 感谢 我 的 编辑 Meg Foley 以 及 O'Reilly 团队 
中 的 其 他 成 员 。 同 时 也 要 感谢 技术 审 稿 人 David Bieber、Jason Brown、Erica Portnoy 和 
Jonathan Stark， 他 们 花费 了 大 量 时 间 审 阅 本 书 并 提出 了 深 有 见地 的 反馈 意见 。 感 谢 React 
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后 ， 非 常 感谢 我 亲爱 的 朋友 们 ， 在 本 书写 作 过 程 中 给 了 我 无 限 的 包容 、 莫 大 的 精神 支持 
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第 1 章 


初 识 React Native 





React Native 是 一 款 用 来 开发 真正 原生 、 可 泻 染 iOS 和 Android 移动 应 用 的 JavaScript 框 
架 。 它 基于 Facebook 公司 开源 的 JavaScript 用 户 界面 开发 框架 React 而 产生 ， 但 React 将 
浏览 器 作为 演 染 平台 ， 而 React Native 的 泻 染 平台 则 是 移动 设备 。 也 就 是 说 ，Web 开发 者 
现在 就 可 以 使 用 我 们 非常 熟悉 的 JavaScript 类 库 来 开发 真正 原生 的 移动 应 用 。 并 且 ， 由 于 
写 的 大 部 分 代码 可 以 在 平台 之 间 共 享 ，React Native 可 以 让 你 更 简单 地 同步 开发 Android 
和 iOS 应 用 。 








区 


与 Web 平台 上 的 React 相似 ，React Native 也 使 用 JSX 进行 开发 ， 这 种 编程 语言 结合 
了 JavaScript 和 类 XML 标记 语言 。React Native 在 后 台 通 过 “桥接 ”的 方式 调用 由 
Objective-C (iOS 平台 ) 或 Java (Android 平台 ) 开放 的 原生 泻 染 接口 ， 因 此 ， 你 的 应 用 将 
会 使 用 真正 原生 的 移动 UI 组件 ， 而 不 是 传统 的 WebView 泻 染 方式 ， 进 而 拥有 与 其 他 移动 
应 用 一 样 的 外 观 和 体验 。 同 时 ，React Native 也 为 JavaScript 开放 了 平台 接口 ， 让 你 的 应 用 
能 够 使 用 平台 提供 的 功能 ， 例 如 摄像 头 和 用 户 定 位 等 。 


React Native 目前 同时 支持 iOS 和 Android， 今 后 也 可 能 扩展 到 其 他 平台 上 。 在 本 书 中 ， 我 
们 将 会 同时 介绍 iOS 和 Android 的 知识 ， 并 且 书 中 大 部 分 代码 都 能 跨 平台 运行 。 没 错 ， 你 
完全 可 以 用 React Native 来 开发 用 于 正式 发 布 的 移动 应 用 。 据 了 解 ，Facebook (https://code. 
facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/) 、 





























Palantir (https://medium.com/@clayallsopp/react-native-in-production-2b3c6e6078ad#.wuiSgl8dx) 
和 TaskRabbit (http://tech.taskrabbit.com/blog/2015/09/21/react-native-example-app/) 等 公司 已 在 
使 用 它 开 发 面向 用 户 的 应 用 。 
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1.1 React Native 的 优点 


事实 上 ，React Native 调用 宿主 平台 标准 泻 染 接口 的 方式 已 经 使 它 从 其 他 现 有 的 跨 平台 应 
用 开发 方案 (比如 Cordova 或 Ionic) 中 脱颖而出 。 目 前 通过 编写 JavaScript、HTML 和 
CSS 的 方式 进行 应 用 开发 的 方案 大 多 使 用 WebView 进行 界面 浑 染 ， 当 然 这 种 方案 是 可 行 
的 ， 但 也 带 来 了 一 些 问题 ， 尤 其 是 性 能 损耗 。 同 时 ， 这 种 方案 通常 无 法 使 用 宿主 平台 的 原 
生 UI 组 件 ， 所 以 这 些 框架 尝试 去 模仿 原生 UI 组 件 的 行为 ， 而 模仿 的 效果 通常 让 人 觉得 不 
够 真实 。 为 了 模仿 各 种 类 似 动画 这 样 的 细节 ， 一 般 都 要 付出 巨大 的 努力 ， 然 而 它们 很 快 又 
会 过 时 。 


相反 ，React Native 则 将 你 的 代码 解析 成 真正 原生 的 UI 组 件 ， 利 用 了 所 用 平台 上 现 有 的 
视图 演 染 方式 。 并 且 ， 由 于 React 不 在 UI 主线 程 中 运行 ， 你 的 应 用 可 以 在 不 牺牲 灵活 性 
的 前 提 下 保持 高 性 能 。React Native 的 生命 周期 与 React 相同 ， 当 属性 (props) 或 状态 
(state) 发 生 改 变 时 ，React Native 会 重新 谊 染 视图 。 而 与 浏览 器 上 的 React 最 大 的 不 同 在 
于 ，React Native 使 用 了 宿主 平台 上 的 UI 元 素来 代替 HTML 和 CSS。 










































































对 于 习惯 了 Web 平台 的 React 开发 者 来 说 ， 这 意味 着 你 可 以 使 用 熟悉 的 工具 来 开发 真正 原 
生 的 移动 应 用 。 在 开发 者 体验 与 跨 平台 开发 等 方面 ，React Native 较 传统 的 移动 端 开发 来 
说 也 有 一 定 的 优势 。 


1.1.1 开发 者 体验 
如 果 你 曾经 有 过 移动 端的 开发 经 历 ， 将 会 对 React Native 的 易 用 性 感到 震惊 。React Native 
团队 已 经 研发 了 强大 的 开发 工具 并 在 框架 内 藤 入 了 友好 的 错误 提示 ， 因 此 使 用 这 些 强 大 的 
工具 会 让 开发 体验 更 加 自然 。 




















侈 如， 由 于 React Native 使 用 了 JavaScript， 我 们 查看 修改 结果 时 不 需要 重新 编译 。 相 反 ， 
按 下 Command+R 就 可 以 刷新 应 用 ， 就 和 在 网 页 上 开发 一 样 。 在 传统 移动 端 开发 中 ， 编 译 
构建 应 用 所 花费 的 时 间 会 积 少 成 多 ， 相 比 之 下 React Native 的 快速 迭代 就 像 是 天 赐 之 福 。 
































React Native 还 可 以 让 你 更 好 地 利用 智能 调试 工具 以 及 错误 报告 机 制 。 如 果 你 习惯 于 使 用 
Chrome 或 者 Safari 的 开发 工具 (图 1-1)， 那 么 使 用 它们 进行 移动 开发 一 定 也 会 让 你 十 分 
愉悦 。 同 样 ， 你 可 以 选择 喜爱 的 任何 文本 编辑 器 来 开发 JavaScript: React Native 不 强制 你 
使 用 Xcode 进行 iOS 开发 ， 也 不 强制 使 用 Android Studio 进行 Android 开发 。 
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< EE iOS Simulator ~- iPhone 6 - iPhone 6 / iOS 8.1 (12B411) 
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” | Carrier 会 6:48 PM 


GAY | React Native Debugger 








)] localhost:8081/debugger-ui 77 @ NS 三 
Slab /debuggerul Ww OO K UIExplorer <Image> 
3 Apps 国 drinks 大 yoga ,| Using the Snap.svg » EL 
React Native JS code runs inside this Chrome tab | Plain Network Image 
| lf the source prop ‘uri’ property is prefixed with 
Press to open Developer Tools. Enable Pause On Caught | "http", then it will be downloaded from the network. 
Exceptions tor a better debugging experience. | 





Status: Debugger session #10001 active 


| Plain Static Image 
| Static assets should be required by prefixing with 
‘image! and are located in the app bundle. 
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| Border Color 
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> 
| Border Radius 





| Background Color 

















1-1: 使 用 Chrome 调试 器 


除了 能 逐渐 改善 开发 者 体验 之 外 ，React Native 也 极 有 可 能 给 你 的 产品 发 布 周期 带 来 一 些 
积极 的 影响 。 例 如 ，Apple 公司 允许 通过 网 络 对 基于 JavaScript 开发 的 功能 进行 更 新 ， 无 需 
额外 的 审核 周期 。 


所 有 这 些小 福利 将 会 节省 你 和 你 的 伙伴 们 的 时 间 和 精力 ， 让 你 可 以 专注 于 工作 中 那些 更 有 
趣 的 部 分 ， 同 时 也 能 提高 你 的 工作 效率 。 




















1.1.2 ”代码 复 用 与 知识 共享 

使 用 React Native 可 以 大 大 减少 开发 移动 应 用 所 需 的 资源 。 任 何 了 解 如 何 编写 React 的 
开发 者 现在 都 可 以 使 用 相同 的 技能 同时 开发 Web 应 用 、iOS 应 用 和 Android 应 用 。React 
Native 避免 了 按 平台 分 工 的 必要 ， 可 以 让 你 的 团队 更 加 快速 地 友 代 产品 ， 并 更 加 高 效 地 共 
享 知 识 和 资源 。 








除了 知识 的 共享 之 外 ， 你 的 大 部 分 代码 也 可 以 被 共享 。 当 然 ， 不 是 你 写 的 所 有 代码 都 可 
以 做 到 跨 平 台 ， 这 取决 于 你 需要 在 特定 的 平台 上 实现 什么 功能 ， 你 可 能 偶尔 也 需要 涉及 
Objective-C 或 Java 的 知识 〈 好 在 这 也 不 是 很 糟糕 ， 我 们 将 会 在 第 7 章 讲解 本 地 模块 的 用 
法 )。 使 用 React Native， 在 不 同 平台 之 间 复 用 代码 将 会 变 得 出 乎 意料 地 简单 。 例 如 ，React 
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Europe 2015 大 会 (https://www.youtube.com/watch?v=PAA9O4E1IM4&feature=youtu.be) 提 到 ， 
Facebook Ads Manager 这 款 Android 应 用 共享 了 其 iOS 版 本 87% 的 人 代码。 另外， 我们 通过 本 
书 完成 的 一 款 办 卡 应 用 做 到 了 iOS 和 Android 代码 的 完全 复 用 。 这 是 很 难 超越 的 成 就 ! 


1.2 ”风险 和 缺点 


就 像 世 间 万 物 一 样 ，React Native 也 难免 存在 一 些 缺 点 ， 至 于 React Native 是 否 适合 你 的 团 
队 ， 则 取决 于 你 们 自身 的 情况 。 


React Native 于 2015 年 3 月 发 布 了 对 iOS 平台 的 支持 ， 同 年 9 月 开始 支持 Android 平台 。 
由 于 目前 React Native 项 目 还 很 年 轻 ， 不 够 成 熟 可 能 是 其 最 大 的 风险 。 它 的 文档 确实 还 有 
提升 的 空间 ， 同 时 项 目 也 在 不 断 升级 和 改进 。 一 些 特性 在 iOS 和 Android 平台 上 仍 未 得 到 
支持 ， 社 区 也 在 不 断 寻 找 最 佳 的 开发 实践 。 不 过 ， 好 在 大 多 数 情况 下 你 都 可 以 自己 实现 那 
些 缺 少 的 接口 ， 我 们 也 会 在 第 7 章 讨论 相关 内 容 。 






































React Native 在 你 的 项 目 中 引入 了 新 的 一 层 ， 因 此 带 来 了 一 些 调试 上 的 麻烦 ， 尤 其 是 在 
React 和 宿主 平台 交互 时 。 我 们 将 在 第 8 章 更 加 深入 地 讲解 React Native 的 调试 技巧 ， 并 探 
讨 一 些 常 见 的 问题 。 





React Native 依然 还 很 年 轻 ， 追 随 新 技术 时 可 能 遇 到 的 问题 在 此 也 不 可 人 避免。 不 过 总 体 来 
说 ， 我 觉得 你 将 会 看 到 它 带 来 的 收益 大 于 风险 。 





1.3: . 放 \ 结 


React Native 是 一 个 振奋 人 心 的 框架 ， 它 使 得 Web 开发 者 可 以 使 用 他 们 现 有 的 JavaScript 
知识 开发 出 强大 的 移动 应 用 。 在 不 牺牲 用 户 体验 和 应 用 质量 的 前 提 下 ，React Native 提高 
了 开发 效率 ， 提供 了 在 i0OS、Android 和 Web 平台 上 的 代码 共享 。 由 于 它 依然 很 新 并 且 还 
在 持续 不 断 地 更 新 ， 你 在 使 用 时 需要 作 一 番 权 衡 。 如 果 你 的 团队 可 以 解决 新 技术 带 来 的 不 
确定 问题 ， 并 且 想 开发 跨 平台 的 应 用 ， 那 么 不 妨 试 试 React Native 吧 。 























在 下 一 章 中 ， 我 们 将 看 一 看 React Native 与 React 主要 有 哪些 不 同 ， 并 讲解 一 些 关键 的 概 
念 。 如 果 你 想 跳 过 这 个 部 分 ， 可 以 直接 跳 到 第 3 章 的 实战 部 分 ， 第 3 章 会 从 开发 环境 的 搭 
建 讲 起 ， 着 手 开 发 我 们 的 第 一 个 React Native 应 用 。 
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第 2 章 





React Native 工 作 原 理 





式 的 知识 。 





2.1 React Native 是 如 何 


如 果 想 学 习 React Native 的 实战 部 分 ， 


在 本 章 中 ， 我 们 将 介绍 “桥接 ”的 知识 ， 了 解 React Native 在 后 台 是 如 何 工 作 的 ， 再 看 看 
React Native 组 件 与 Web 平台 上 的 组 件 有 何 区 别 ， 以 及 开发 移动 应 用 所 需 的 组 件 创建 与 样 





你 可 以 直接 跳 到 下 一 章 。 


工作 的 


使 用 JavaScript 开发 移动 应 用 的 想法 可 能 有 些 奇怪 。 在 移动 环境 中 使 用 React 是 怎样 实现 














的 呢 ? 为 了 更 好 地 理解 React Native 的 工作 原理 ， 我 们 首先 需要 回顾 一 下 React 的 一 个 特 








点 : Virtual DOM (虚拟 DOM)。 


在 React 中 ，Virtual DOM 就 像 是 一 个 中 间 层 ， 











介 于 开发 者 描述 的 视图 与 实际 在 页 面 上 














泻 染 的 视图 之 间 。 为 了 在 浏览 器 上 泻 染 出 可 交互 的 用 户 界面 ， 开 发 者 必须 操作 浏览 器 的 


DOM (Document Object Model， 文 档 对 象 模型 














)。 这 个 操作 代价 昂贵 ， 对 DOM 的 过 度 操 


作 将 会 给 性 能 带 来 严重 的 影响 。React 维护 了 一 个 内 存 版 本 的 DOM， 通 过 计算 得 出 必要 的 


最 小 操作 并 重新 泻 染 。 图 2-1 展示 了 这 个 工作 过 








程 。 
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yy 


状态 改变 一 计算 差异 (Diff) 一 > 重新 泻 染 


浏览 器 
DOM 




















2-1: 执行 Virtual DOM 的 计算 ,减少 浏览 器 DOM 的 重复 泻 染 


对 于 Web 环境 的 React 而 言 ， 大 多 数 的 开发 者 认为 Virtual DOM 的 出 现 主要 是 为 了 优化 
性 能 。Virtual DOM 确实 能 提升 性 能 ， 但 它 主 要 的 潜力 在 于 提供 了 强大 的 抽象 能 力 。 在 开 
发 者 的 代码 与 实际 的 浑 染 之 间 加 入 一 个 抽象 层 ， 这 带 来 了 很 多 可 能 性 。 想 象 一 下 ， 如 有 果 
React 能 够 泻 染 到 浏览 器 以 外 的 其 他 平台 呢 ?” 毕 竟 ，React 已 经 “理解 ”了 你 的 应 用 应 该 如 
何 展 现 。 

确实 ， 这 就 是 React Native 的 工作 原理 ， 如 图 2-2 所 示 。React Native 调用 Objective-C 的 
API 去 演 染 ioS 组 件 ， 调 用 Java 接口 去 泻 染 Android 组 件 ， 而 不 是 渲染 到 浏览 器 DOM 上 。 
这 使 得 React Native 不 同 于 那些 基于 Web 视图 的 跨 平 台 应 用 开发 方案 。 






















































React Component 


render: function() { 
return <div>Hil</div>; React 
} 





浏览 器 





React Component 
render: function() { 


return <View>Hil</View>; 














2-2: React 可 以 泻 染 到 多 平台 


“桥接 ” 令 这 一 切 成 为 可 能 ， 它 使 得 React 可 调用 宿主 平台 开放 的 UI 组 件 。React 组 件 通过 
render 方法 返回 了 描述 界面 的 标记 代码 。 如 果 是 在 Web 平台 上 ，React 最 终 将 把 标记 代码 
解析 成 浏览 器 的 DOM， 而 在 React Native 中 ， 标 记 代 码 会 被 解析 成 特定 平台 的 组 件 ， 例 如 
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<View> 将 会 表现 为 iOS 平台 上 的 UIView。 


React Native 目前 同时 支持 了 1iOS 和 Android 两 种 平台 。 由 于 Virtual DOM 提供 了 抽象 层 ， 
React Native 也 可 以 支持 其 他 平台 ， 只 需 为 其 提供 “桥接 ” 即 可 。 


2.2 泻 染 周期 
如 果 你 习惯 使 用 React， 那 你 应 该 熟悉 React 的 生命 周期 。 当 React 在 Web 环境 中 运行 时 ， 
泻 染 周期 始 于 React 组 件 挂 载 之 后 (图 2-3)。 


























圭 载 React 组 件 演 梁 React 


到 DOM 上 组 件 

















2-3: React 组 件 挂 载 过 程 





接着 ，React 进入 演 染 周期 并 根据 需要 泻 染 组 件 (图 2-4)。 









































图 2-4: React 组 件 重新 泻 染 过 程 
在 泻 染 阶段 ，React 将 开发 者 在 render 方法 中 返回 的 HTML 标记 直接 按 需 演 染 到 页 面 上 。 


至 于 React Native， 生 命 周 期 与 React 基 本 相同 ,但 演 染 过 程 有 一 些 区 别 ， 因 为 React 
Native 依赖 于 “桥接 "， 正 如 先前 图 2-2 所 示 。JavaScript 通过 “桥接 ”的 解析 ， 间 接 调用 
宿主 平台 的 基础 接口 和 UI 元 素 (也 就 是 Objective-C 或 Java) 。 由 于 React Native 不 是 在 
UI 主线 程 运行 ， 它 可 以 在 不 影响 用 户 体验 的 前 提 下 执行 这 些 异 步调 用 。 


2.3 在 React Native 中 创建 组 件 


所 有 的 React 代码 都 存在 于 React 组 件 中 。React Native 组 件 与 React 组件 大 体 上 一 致 ， 但 
在 演 染 和 样式 方面 有 一 些 重要 的 区 别 。 






































2.3.1 编写 视图 
当 编 写 Web 环 境 的 React 时 ， 视 图 最 终 需 要 渲染 成 普通 的 HTML 元 素 (<div>、<p>、 
<span>、<a> 等 )。 而 在 React Native 中 ， 所 在 的 于 二 部 痢 窟 王 各 说 定 的 React 组 件 所 赫 换 
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( 见 表 2-1)。 最 基础 的 组 件 是 能 跨 平台 的 <View>， 这 是 一 个 简单 且 灵 活 的 UI 元 素 ， 类 似 于 
<div> 标签 。 例 如 ， 在 iOS 中 ，<View> 组 件 被 演 染 成 UIView， 而 在 Android 平台 则 被 演 染 
成 View。 





表 2-1: Web 与 React Native 基 础 元 素 的 比较 














React React Native 
<div> <View> 
<span> <Text> 
<li>, <ul> <ListView> 
<img> <Image> 
其 他 组 件 则 是 平台 特定 的 。 例 如 ，<DatepPickerI0S> 组 件 显然 将 被 演 染 成 iOS 标准 的 日 期 





选择 器 。 下 面 是 从 UIExplorer 示例 应 用 中 摘录 出 来 的 代码 ， 用 来 展示 iOS 日 期 选择 器 。 正 
如 你 期 待 的 那样 ， 用 法 相当 直观 : 








<DatePickerIOS 
date={this. state.date} 
mode="date" 
timeZoneOffsetInMinutes={this. state.timeZoneOffsetInHours * 60} 


/> 
以 上 代码 将 被 泻 染 成 一 个 标准 的 iOS 日 期 选择 器 (如 图 2-5 所 示 )。 








March 17 2014 
April 18 2015 


May 19 2016 











图 2-5: DatePickerlOS， 顾 名 思 义 ， 是 iOS 特有 的 组 件 





由 于 我 们 所 有 的 UI 元素 均 为 React 组 件 ， 而 不 是 像 <div> 这 样 基 础 的 HIMEL 元 素 ， 因 
此 我 们 在 使 用 每 一 个 组 件 之 前 ， 都 需要 明确 地 进行 导入。 例如 ， 我 们 可 以 这 样 导 入 
<DatepPickerI0S> 组 件 : 





var React = require('react-native'); 
var { 
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DatePickerI0S 
} = React; 
UIExplorer 应 用 是 一 个 打包 的 标准 React Native 示例 (https://github.com/facebook/react- 
native#examples) ， 可 以 让 你 查看 它 所 支持 的 所 有 UI 元素 , 建议 你 体验 一 下 其 中 包含 的 各 种 
元 素 。 除 此 之 外 ， 它 还 讲解 了 许多 关于 样式 和 交互 的 知识 。 








Rl 
路 


平台 特定 的 元 素 和 接口 在 官方 文档 中 有 特殊 的 标签 ， 通 常 使 用 平台 名 称 作为 


后 级, 例如 : <SwitchAndroid> 和 <SwitchI0S>。 














这 些 组 件 因 平 台 而 不 同 ， 因 此 在 使 用 React Native 时 ， 如 何 组 织 你 的 组 件 变 得 尤为 重要 。 
在 Web 环境 的 React 中 ， 我 们 通常 混合 各 种 React 组 件 ， 有 的 组 件 控 制 逻 辑 及 其 子 组 件 ， 
而 有 的 则 浑 染 原生 标记 。 在 使 用 React Native 上 时， 如 果 你 想 复 用 代码 ， 那 么 这 些 组 件 的 
抽象 分 离 就 至 关 重 要 。 当 然 ， 如 果 一 个 组 件 渲染 <DatePickerI0S> 元 素 ， 那 它 显然 不 能 在 
Android 平台 复 用 了 。 不 过 ， 如 果 一 个 组 件 封装 的 是 关联 逻辑 ， 那 就 可 以 被 复 用 。 因 此 ， 
视图 组 件 可 以 根据 平台 进行 替换 选择 。 如 果 你 乐意 的 话 ， 还 可 以 为 组 件 设计 平台 特定 的 版 
本 ， 例 如 picker.ios.js 和 picker.android.js。 我 们 将 在 4.4.2 节 具 体 讲解 。 





























2.3.2 ”使 用 JSX 

与 React 中 相 一 致 ，React Native 也 是 通过 编写 JSX 来 设计 视图 ， 并 将 视图 标记 和 控制 逻辑 
组 合 在 一 起 成 为 一 个 文件 。React 刚 癌 世 的 时 候 ，JSX 在 业界 引起 了 强烈 的 反 啊 。 对 于 许多 
Web 开发 者 来 说 ， 根 据 技术 进行 文件 分 离 是 理所当然 的 : 保持 CSS、HTML 和 JavaScript 
文件 的 独立 。 然 而 将 标记 、 控 制 逻 辑 ， 其 至 样式 合并 成 一 门 语言 难免 会 让 人 觉得 混乱 。 


JSX 认为 减少 心智 负担 比 文件 分 离 更 有 用 。 在 React Native 中 ， 这 一 点 表现 得 更 为 明显 。 
在 一 个 没有 浏览 器 的 世界 里 ， 每 个 组 件 的 样式 、 标 记 和 行为 被 统一 成 单个 文件 的 形式 将 会 
更 有 意义 。 因 此 ，React Native 中 的 .js 文件 实际 上 就 是 JSX 文件 。 如 果 你 正在 使 用 原生 
JavaScript 编写 Web 环境 的 React， 你 应 该 想 转换 到 JSX 语法 来 编写 React Native 项 目 。 

















假如 你 之 前 从 未 使 用 过 JSX， 也 不 用 太 担 心 ， 它 非常 简单 。 举 个 例子 ， 用 纯 JavaScript 编 
写 React 组 件 的 代码 看 起 来 如 下 : 


var HelloMessage = React.createClass({ 
displayName: "HelloMessage", 


render: function render() { 
return React.createELement( 
"div", 
null, 
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"Hello "， 
this.props.name 


); 
Ds 


React.render(React.createElement(HelloMessage, { name: "Bonnie" }), mountNode); 





我 们 可 以 通过 使 用 JSX 使 其 更 为 简洁 ， 使 用 类 XML 标记 来 代 赫 调用 React.createELement 
方法 并 传 入 一 组 HTML 属性 的 做 法 。 


var HeLLoMessage = React.createCLass({ 
render: function() { 
// 返回 标记 ,而 不 是 调用 createElement 方 法 。 
return <div>Hello {this.props.name}</div>; 
} 
]); 












































// 我 们 不 再 需要 调用 createElement 方 法 。 


React.render(<HeLLoMessage name="Bonnie" />, mountNode); 














以 上 两 段 代码 最 终 都 会 在 页 面 上 被 演 染 为 下 面 的 HTML: 











<div>Hello Bonnie</div> 


2.3.3 ”原生 组 件 的 样式 

在 Web 中 ， 正 如 使 用 HTML 标签 一 样 ， 我 们 仍然 使 用 CSS 来 为 React 组 件 添加 样式 。 不 
论 你 是 否 喜欢 CSS， 它 都 已 经 成 为 Web 开发 不 可 或 缺 的 一 部 分 。React 通常 不 影响 我 们 编 

写 CSS 的 方式 ， 它 确实 让 内 联 样式 (清晰 且 实 用 ) 的 使 用 和 样式 的 动态 创建 (通过 props 

和 state) 更 加 容易 。 除 此 之 外 ，React 基本 上 不 关心 我 们 是 如 何 处 理 样 式 的 。 


非 Web 平台 上 有 大 量 的 方法 来 处 理 布 局 和 样式 。 但 庆幸 的 是 ， 我 们 在 使 用 React Native 
时 ， 只 需要 用 一 种 标准 的 方法 来 处 理 样式 。React 和 宿主 平台 之 间 的 “桥接 ”包含 了 一 
个 缩减 版 CSS 子 集 的 实现 。 这 个 CSS 子 集 主要 通过 flexbox 进行 布局 ， 做 到 了 尽量 简单 
化 ， 而 不 是 去 实现 所 有 的 CSS 规则 。 有 别 于 Web 平台 ，CSS 的 支持 程度 因 浏 览 器 而 不 同 ， 
React Native 则 做 到 了 样式 规则 的 一 致 。 在 React Native 配套 的 UIExplorer 应 用 (https:// 
github.com/facebook/react-native/tree/master/Examples/UIExplorer) 中 不 仅 可 以 查看 许多 UI 
元 素 ， 也 能 看 到 许多 支持 的 样式 例子 。 


React Native 也 坚持 使 用 内 联 样式 ， 通 过 JavaScript 对 象 进 行 样式 组 织 。React 团队 先前 也 
提倡 在 Web 环境 的 React 中 使 用 内 联 样式 。 如 果 你 曾经 在 React 中 使 用 过 内 联 样式 ， 那 么 
下 面 的 语法 你 一 定 非常 熟悉 了 : 


// 定义 一 个 样式 。 
var style = { 
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backgroundColor: 'white', 
fontSize: '16px' 


}; 
// 然后 使 用 它 。 
var tv=( 


<Text style={style}> 
A styled Text 
</Text>); 











为 了 让 样式 更 容易 管理 ，React Native 为 我 们 提供 了 创建 和 扩展 样式 的 工具 。 我 们 将 在 第 5 


音 探 索 这 部 分 内 容 。 








内 联 样式 的 写法 让 你 觉得 难受 ? 它 基 于 Web 背景 而 产生 ， 被 公认 为 标准 实践 的 一 个 突破 。 
相对 于 样式 表 来 说 ， 使 用 样式 对 象 可 能 需要 一 些 思维 上 的 调整 ， 从 而 改变 你 编写 样式 的 方 
法 。 然 而 ， 在 React Native 中 ， 这 是 一 个 实用 的 转变 。 我 们 将 在 第 5 章 讨论 编写 样式 的 最 
佳 实践 和 工作 流程 ， 你 很 难 不 对 它 的 实际 使 用 效果 感到 惊讶 ! 


2.4 宿主 平台 接口 


使 用 Web 环境 的 React 与 React Native 最 大 的 不 同 应 该 就 在 于 宿主 平台 的 接口 了 。 在 Web 
中 ， 我 们 遇 到 的 问题 通常 是 由 于 采纳 标准 的 不 一 致 和 碎片 化 引起 的 ， 并 且 大 多 数 浏览 器 只 
支持 部 分 核心 的 特性 。 然 而 在 React Native 中 ， 平 台 特 定 的 接口 在 提供 优秀 原生 的 用 户 体 
验方 面 发 挥 了 巨大 的 作用 。 当 然 ， 要 考虑 的 方面 还 有 很 多 。 接 口 吉 括 了 许多 功能 ， 从 数据 
存储 到 地 理 服务 ， 以 及 操控 硬件 设备 (如 摄像 头 ) 等 。 由 于 React Native 可 以 扩展 到 其 他 
平台 ， 我 们 有 机 会 看 到 各 种 不 同 的 平台 接口 ， 例 如 ，React Native 和 虚拟 现实 头盔 之 间 的 
接口 会 是 什么 样 的 呢 ? 







































































默认 情况 下 ，iOS 和 Android 版 本 的 React Native 支持 许多 常用 的 特性 ， 甚 至 可 以 支持 任何 
异步 的 本 地 接口 ， 本 书 中 将 会 涉及 这 些 内 容 。React Native 让 宿主 平台 接口 的 使 用 变 得 更 
加 简单 和 直观 ， 你 可 以 在 其 中 自由 地 试验 。 同 时 ， 务 必 思 考 一 下 怎样 做 才 符 合 目标 平台 的 
体验 ， 并 在 心里 设计 好 交互 过 程 。 






































考 庸 置疑，React Native 的 “桥接 ”不 可 能 暴露 宿主 平台 全 部 的 接口 。 如 果 你 需要 使 用 一 
个 未 支持 的 特性 ， 完 全 可 以 自己 动手 添加 到 React Native 中 。 另 外 ， 如 果 其 他 人 已 经 集成 ， 
那 就 更 好 了 ， 所 以 应 该 及 时 查看 社区 是 否 已 经 或 即将 支持 某 些 特性 。 我 们 将 在 第 7 章 讨 论 
这 部 分 知识 。 


值得 注意 的 是 ， 使 用 平台 接口 也 会 对 代码 复 用 有 帮助 。 同 时 ， 实 现 平台 特定 功能 的 React 
组 件 也 是 平台 特定 的 。 隔 离 和 封装 这 些 组 件 将 会 给 你 的 应 用 带 来 更 大 的 灵活 性 。 当 然 ， 
这 对 你 开发 Web 应 用 同样 奏效 ， 如 果 你 想 共享 React 和 React Native 的 代码 ， 请 记 住 像 
DOM 这 样 的 接口 在 React Native 中 并 不 存在 。 





让 
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2.5 小结 


使 用 React Native 为 移动 应 用 编写 组 件 与 Web 环境 的 React 相 比 有 一 些 不 同 。JSX 是 强制 使 
用 的 ， 并 且 我 们 通过 创建 组 件 的 方式 来 开发 基本 模块 ， 比 如 <View> 代替 了 <div> 这 个 HTML 
元 素 。 样 式 方面 也 不 太一 样 ， 我 们 通过 使 用 CSS 的 子 集 编写 内 联 语句 的 方式 来 编写 样式 。 
当然 ， 这 些 调 整 都 能 得 到 很 好 的 把 控 。 在 下 一 章 中 ， 我 们 将 动手 编写 第 一 个 移动 应 用 |! 

















图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





第 3 章 


构建 你 的 第 一 个 应 用 





本 章 将 会 讲解 如 何 搭建 React Native 开发 环境 以 及 如 何 构建 一 个 简单 的 应 用 ， 并 将 其 部 署 
到 自己 的 iOS 或 Android 移动 设备 上 。 


3.1 搭建 环境 


搭建 开发 环境 让 你 可 以 跟着 本 书 的 例子 一 起 学 习 并 开发 你 自己 的 应 用 。 














关于 安装 React Native 的 说 明 可 以 查看 React Native 官方 文档 (http://facebook.github.io/ 
react-native/)。 官 方 网 站 会 提供 最 新 的 安装 参考 ， 不 过 在 此 我 们 也 会 讲解 这 些 步 又 。 








你 将 会 用 到 Homebrew (http://brew.sh/)， 一 个 OS X 系统 的 通用 包 管 理工 具 ， 用 来 安装 
React Native 的 相关 依赖 。 本 书 假设 你 使 用 OS X 操作 系统 ， 因 此 可 以 同时 开发 iOS 和 
Android 应 用 。 























安装 好 Homebrew 之 后 ， 运 行 以 下 命令 


brew install node 
brew install watchman 
brew install flow 











React Native 包 管 理 器 同时 使 用 了 node 和 watchman， 如 果 在 今后 的 开发 过 程 中 遇 到 问 
题 ， 建 议 你 更 新 这 些 依赖 。flow 是 Facebook 公司 出 品 的 一 个 类 型 检查 库 ， 它 同样 被 React 
Native 所 采用 (如 果 你 想 让 React Native 项 目 支 持 类 型 检查 ， 可 以 使 用 flow)。 





























如 果 安 装 过 程 中 遇 到 问题 ， 你 可 能 需要 更 新 brew 和 相关 依赖 包 (以 下 命令 可 能 比较 耗 时 )。 
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brew Update 
brew Upgrade 


如 果 出 现 错误 ， 你 需要 修复 本 地 的 brew 安装 程序 ，brew doctor 可 以 帮助 你 找到 问题 所 在 。 





3.1.1 安装 React Native 
现在 你 已 经 安装 好 了 node， 然 后 就 可 以 通过 npm (Node 包 管 理 器 ) 来 安装 React Native 命 
令 行 工具 了 : 

npm install -9g react-native-cli 


这 个 步骤 将 会 在 你 的 系统 全 局 安装 React Native 命令 行 工 具 。 
React Native 已 经 安装 成 功 了 1 


成 之 后 ， 祝 痪 你 ， 此 时 


这 





接 下 来 ， 你 需要 处 理 特定 平台 的 安装 。 为 了 开发 特定 平台 的 移动 应 用 ， 你 需要 安装 平台 开 
发 的 依赖 。 本 章 将 继续 讲解 相关 内 容 ， 包 括 iOS 和 Android 两 个 版 本 。 





3.1.2 ” iOS 依赖 

为 了 开发 和 发 布 iOS 应 用 ， 你 需要 获得 一 个 iOS 开发 者 账号 。 申 请 这 个 账号 是 免费 的 ， 足 
够 用 来 开发 使 用 了 。 如 果 需 要 部 署 到 iOS 应 用 商店 ， 你 需要 获得 一 个 许可 ， 价 格 是 每 年 99 
美元 。 

如 果 你 还 没有 完成 这 一 步 的 话 ， 需 要 下 载 并 安装 Xcode， 它 包含 了 Xcode 集成 开发 环境 、 
iOS 模拟 器 以 及 iOS SDK (软件 开发 工具 包 )。 你 可 以 从 应 用 商店 或 Xcode 网 站 (https:// 
developer.apple.com/xcode/download/) 下 载 。 




















Xcode 成 功 安装 之 后 ， 接 受 许可 ， 一 切 就 准备 就 绪 了 。 


3.1.3 Android 依赖 


Android 依赖 的 安装 需要 较 多 的 步 又， 应 查看 官方 文档 (https://facebook.github.io/react- 
native/docs/android-setup.html) 中 最 新 的 安装 说 明 。 需 要 注意 的 是 ， 这 些 安装 说 明 都 假设 
你 没有 安装 过 Android 开发 环境 。 总 体 而 言 ， 安 装 分 为 三 个 主要 阶段 : 安装 SDK、 安 装 模 
拟 器 工具 、 创 建 模拟 器 。 





首先 ， 你 需要 安装 JDK (Java 开发 工具 包 ) 和 Android SDK。 


(1) 安装 最 新 版 本 的 JDK (http://www.oracle.com/technetwork/java/javase/downloads/jdk8- 
downloads-2133151.html)。 

(2) 通过 brew install android-sdk 安装 Android SDK。 

(3) 在 shell 配置 文件 中 正确 导出 ANDROID_HOME 环境 变量 (~/.bashrc、~/.zshrc 或 其 他 shell)。 
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export ANDROID_HOME=/usr/LocaL/opt/android-sdk 


许多 Android 相关 的 开发 任务 都 使 用 这 个 环境 变 
令 使 得 配置 可 以 立即 生效 。 


source 命令 


0 





量 。 需 要 确保 添加 环境 变量 之 后 执行 














令 行 执 行 android 命令 ， 从 而 打开 Android SDK 管理 器 。 如 图 3-1 所 示 ， 管 
器 将 会 显示 出 开发 包 的 安装 情况 。 














Ln 


OOe@ 


Packages 


四 四 


SDK Path: 


PCa 


! 嘲 ' Name 
了 LTools 


六 Android SDK Tools 


仿 Anaroia SDK Platform-tools 


# Android SDK Build-tools 
Android SDK Build-tools 
Android SDK Build-tools 
Android SDK Build-tools 
# Android SDK Build-tools 
Tools (Preview Channel) 


Android SDK Manager 


API 





P [3 Android 6.0 (API 23) 
上 世 Android 5.1.1 (API 22) 
PE3 Android 5.0.1 (API 21) 
P E23 Android 4.4W.2 (API 20) 
P [3 Android 4.4.2 (API 19) 
P [E23 Android 4.3.1 (API 18) 
P [3 Android 4.2.2 (API 17) 
PE3 Android 4.1.2 (API 16) 
P [3 Android 4.0.3 (API 15) 
P [E23 Android 2.3.3 (API 10) 
P [C3 Android 2.2 (API 8) 

Vv | Extras 


Obsolete 


Show: Updates/New Installed Select New or Updates 





Deselect All 


2 me 0 


Rev. Status 


24.3.4 区 Installed 
23.0.1 [Not installed 
23.0.1 [Not installed 
22.0.1 [Not installed 
21.1.2 [Not installed 
20 Not installed 
19.1 | |Not installed 


Install 16 packages... 

















Done loading packages. 中 
3-1: Android SDK 管理 器 允许 你 选择 开发 包 进行 安装 
等 待 SDK 管理 更 新 并 下 载 开 发 包 列 表 。 开发 包 会 被 默认 选中 ， 另 外 要 确保 选中 了 以 
下 选项 : 


。 Android SDK Build-tools version 23.0.1 
。 Android 6.0 (API 23) 
。 Android Support Repository 
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然后 ， 点 击 Install Packages 并 接受 合适 的 许可 。 等 待 安装 完成 可 能 会 花费 一 些 时 间 。 
接 下 来 ， 你 将 要 安装 模拟 器 和 相关 的 工具 。 


启动 一 个 新 的 shell， 然 后 再 次 运行 android 来 启动 Android SDK 管理 器 。 我 们 将 安装 一 些 
其 他 的 包 。 














。 Intel x86 Atom System Image (for Android 5.1.1-API 22) 
。 Intel x86 Emulator Accelerator (HAXM installer) 


再 次 点 击 Install Packages， 接 受 合适 的 许可 。 


这 些 依赖 包 使 我 们 能 够 创建 Android 虚拟 设备 (Android Virtual Devices，AVDs) 或 模拟 
器 ， 但 实际 上 我 们 还 未 创建 任何 模拟 器 。 让 我 们 来 创建 它 ， 运 行 如 下 命令 启动 AVD 管理 
器 (如 图 3-2 所 示 ): 








android avd 





全 四国 Android Virtual Device (AVD) Manager 





Device Definitions 





Android Virtual Devices 


List of existing Android Virtual Devices located at /Users/bonnie/.android/avd 
AVD Name Target Name Platform API Level CPU/ABI | Create 





| Nexus6 Android 6.0 6.0 23 Intel Atom (x86) [ 


| star 
国 6.0 60 23 IntelAtom (x86) 











Delete... 





Details... 








Refresh | 
丰 A repairable Android Virtual Device. 里 An Android Virtual Device that failed to load. Click 'Details' to see the 














3-2: 通过 AVD 管理 器 创建 和 运行 模拟 器 








之 后 ， 点 击 Create 按钮 并 填写 创建 模拟 器 的 相关 信息 (如 图 3-3 所 示 )。 对 于 模拟 器 选项 ， 
记得 勾 选 Use Host GPU (如 图 3-4 所 示 )。 
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| 全 国 Edit Android Virtual Device (AVD) - 

AVD Name: galaxy 
Device: Galaxy Nexus (4.65", 720 x 1280: xhdpi) 
Target: Android 6.0 - API Level 23 
CPU/ABI: Intel Atom (x86) 
Keyboard: Hardware keyboard present 
Skin: No skin 
Front Camera: None 
Back Camera: None 
Memory Options: RAM: 1024 VM Heap: 64 
Internal Storage: 200 MiB 
SD Card: 

© size: MiB 

(J File: 
Emulntinn mntinne， ~ Snanshot 局 Use Host GPU 

Cancel 
图 3-3: 创建 任何 你 喜欢 的 模拟 器 (此 处 创建 了 一 个 Galaxy Nexus 模拟 器 ) 
Emulation Options: Snapshot Use Host GPU 











3-4: 确保 已 经 勾 选 了 Use Host GPU， 否 则 模拟 器 会 非常 


如 果 愿 意 的 话 ， 你 可 以 创建 许多 AVD。 由 于 Android 设备 种 类 繁多 ， 有 不 同 的 屏幕 尺寸 、 
分 辨 率 和 功能 ， 因 此 使 用 不 同 的 模拟 器 通常 能 为 测试 带 来 帮助 。 当 然 ， 出 于 学 习 的 目的 ， 
我 们 只 需要 安装 一 个 即 可 。 


3.2 ”创建 一 个 新 的 应 用 


你 可 以 使 用 React Native 命令 行 工具 来 创建 一 个 新 的 应 用 ， 它 会 为 你 生成 一 个 包含 React 
Native、iOS 和 Android 的 全 新 模板 工程 : 


X 盯 
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react-native init FirstProject 


成 功 创建 之 后 的 项 目 结构 如 图 3-5 所 示 。 








android 
app 
build.gradle 
gradle 
gradle.properties 
gradlew 
gradlew,. bat 
settings.gradle 
index.android.]js 
index.ios.]js 
ios 
FirstProject 
FirstProject.xcodeproj 
FirstProjectTests 
main.jsbundle 
node_modules 
[一 react-native 
package. json 











3-5: 默认 工程 的 文件 结构 


中 ios/ 和 android/ 目录 包含 了 平台 相关 的 开发 模板 。 你 的 React 代码 被 放 在 index.ios.js 
和 index.android.js 文件 中 ， 它 们 分 别 是 各 自 平台 的 入 口 文 件 。 通 过 npm 安装 的 依赖 文件 通 
常会 被 放 在 node_modules/ 目录 下 。 





如 果 需 要 ， 可 以 从 GitHub 仓库 中 下 载 本 书 的 示例 工程 (https://github.com/bonniee/learning- 


react-native ) 。 





3.2.1 在 iOS 平 台 运 行 React Native 应 用 
作为 初学 者 ， 我 们 将 分 别 尝试 在 模拟 器 和 物理 设备 上 运行 iOS 版 本 的 React Native 应 用 。 
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使 用 Xcode 打开 ios/ 目录 下 的 FirstProject.xcodeproj 文件 。 你 会 注意 到 左上 方 有 一 个 “ 运 
行 ”按钮 ， 如 图 3-6 所 示 。 点 击 “运行 ”按钮 ， 程 序 将 会 在 编译 之 后 启动 。 你 也 可 以 选择 
不 同 的 10S 模拟 器 作为 部 署 目标 。 




















© @ PF 图 A: FirstProject 〉 世 iPhone 6 


T 











图 3-6:“ 运 行 ”按钮 和 部 署 目 标的 切换 





点 击 “ 运 行 ” 按 钮 之 后 ，React 包 管理 器 将 会 自动 运行 在 新 的 终端 窗口 中 ， 如 果 运 行 失败 
或 输出 错误 ， 请 在 FirstProject 目录 下 重新 运行 npm install 和 npm start 命令 。 








终端 窗口 如 图 3-7 所 示 。 








@OO 全 bonnie 一 React Packager 一 node 一 80x24 ww 





| Running packager on port 8081. 

| Keep this packager running while developing on any JS 

| projects. Feel free to close this tab and run your own 

| packager instance if you prefer. 
| 
| 
| 


https://github.com/facebook/react-native 











图 3-7，React 包 管 理 器 

















包 管 理 器 就 绪 之 后 ，iOS 模拟 器 将 会 运行 默认 的 应 用 程序 。 不 出 意外 的 话 ， 结 果 应 如 图 3-8 
所 示 。 


























构建 你 的 第 一 个 应 用 | 19 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





iOS Simulator - iPhone 


Carrier 全 


Welcome 


6 -iPhone6 /ios 8.1 (12B411) 
9:36 PM 到) 


to React Nativel 


To get started, edit index.ios.js 


Press Cmd+R to reload, 
Cmd+Control+Z for dev menu 














3-8: 默认 应 用 的 截图 


为 了 让 代码 能 在 模拟 器 上 实时 更 新 ， 需 要 保证 包 管理 器 一 直 处 于 运行 状态 。 如 果 包 管理 











2 


























[2 


不 幸 崩 并 退出 ， 可 切换 到 工程 目录 ， 然 后 运行 npm start 命令 来 重启 它 。 


3.2.2 ”部 署 到 iOS 设 备 
为 了 将 你 的 React Native 应 用 上 传 至 物理 





E iOS 设备 中 ， 你 需要 一 个 Apple 开发 者 账号 。 然 


后 ， 需 要 生成 证 书 并 注册 你 的 设备 。 最 后 ， 打 开 Xcode 偏好 设置 ， 添 加 你 的 账号 即 可 (如 


3-9 所 示 )。 
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@e@e Accounts 


: am 
三 [Se 

[可 | 人 久 出 7 力 大 有 & 

eneral Accounts Behaviors Navigation Fonts & Colors Text Editing Key Bindings Source Control Downloads Locations 


中 





回 AppleID 


于 bonnie.eisenman@gmail. 
bonnie.eisenman@gma | 


Apple ID: bonnie.eisenman@gmail.com 


Password: seooeoeeoeoeoeeoew 


Description: bonnie.eisenman@gmail.com 


N 
Bonnie Eisenman 


View Details... 























图 3-9: 在 Xcode 偏好 设置 面板 添加 你 的 账户 


接 下 来 看 如 何 为 你 的 账号 生成 证 书 。 最 简单 的 办 法 就 是 在 Xcode 中 打开 通用 面板 
(General) ， 如 图 3-10 所 示 ， 你 会 看 到 一 个 警告 的 符号 。 点 击 Fix Issue (修复 问题 ) 按钮 来 











解除 警告 。 为 了 从 Apple 公司 获取 证 书 ，Xcode 将 会 一 步 步 引 导 你 。 








上 妇 | < > | 轩 weatherProject 4 








| 0 oA: WeatherProject $ General Capabilities Info Build Settings Build Phases Build Rules 











v Identity 





Bundle ldentifier | org.reactjs.native.example.WeatherP | 





Version [1.0 | 





Build [1 | 


Team | Bonnie Eisenman (bonnie.eise... 了 | 





No signing identity found 
Xcode can request a new iOS Development signing identity for 
you. 


(Fix lssue ) 











图 3-10: Xcode 通用 面板 
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成 功 获 取证 书 之 后 ， 工 作 基 本 就 完成 了 。 最 后 一 步 是 登录 到 Apple 开发 者 中 心 (http:/ 
developer.apple.com) ， 然 后 注册 你 的 设备 〈 如 图 3-11 所 示 )。 























@ Register Device 
Name your device and enter its Unique Device ldentifier (UDID). 





Name: | 


UDID: 











图 3-11: 在 iOS 开发 者 中 心 注册 你 的 iOS 设备 


设备 的 UDID 很 容易 获取 。 将 你 的 设备 连接 到 电脑 上 ， 打 开 iTunes， 选 择 你 的 设备 ， 然 后 
单 击 序列 号 ， 就 可 以 看 到 UDID 显示 出 来 并 且 复 制 到 剪贴 板 中 了 。 












































一 旦 将 你 的 设备 注册 到 Apple 公司 之 后 ， 构 建 列表 中 就 会 出 现 许 可 的 设备 了 。 




















如 果 你 只 想 发 布 到 测试 设备 上 ， 那 么 这 个 注册 过 程 也 可 以 在 今后 进行 。 另 外 ，Apple 公司 
每 年 会 通过 开发 者 计划 为 独立 开发 者 分 配 100 个 设备 用 于 测试 。 


最 后 ， 我 们 在 部 署 之 前 需要 对 代码 作 一 些 改动 。 你 需要 在 AppDelegatem 文件 中 将 
localhost 改 成 你 的 Mac 的 卫 地 址 。 假 如 你 不 知道 如 何 查 看 自己 电脑 的 卫 地址 ， 可 以 在 终 
端 运 行 ifconfig， 在 eng 下 的 inet 即 为 卫 地 址 。 











例如 ， 你 的 全 地 址 为 10.10.12.345， 那 么 应 该 把 jsCodeLocation 修改 为 : 


jsCodeLocation = 
[NSURL URLWithString:@"http://10.10.12.345:8081/index.ios.bundle"]; 





呀 ! 一 路 的 配置 终于 完成 了 ， 现 在 我 们 可 以 在 Xcode 左上 方 选择 部 署 的 物理 设备 了 (图 
3-12) 。 
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@ (EO > | A: WeatherProjet v D lagomorphical 3 | 


司 
二 Me MA MOY EE eB | t) 
iPad 2 三 
一 WeatherProject ww ; > . 
| 2 targets, iOS SDK 8.3 iPad Air | 
v WN WeatherProject BB iPad Retina 
main.jsbundle iPhone 4s 
h AppDelegate.h 世 iPhone 5 
m AppDelegate.m 页 iPhone 5s 
lnages passets 责 iPhone 6 Plus 
十 | Info.plist 2 
- 酌 iPhone 6 


LaunchScreen.xib 


m main.m 世 Resizable iPad 


Pp i Libraries Resizable iPhone 


Pp WY WeatherProjectTests 
Pp Products 


More Simulators... 

















3-12: 选择 你 的 iOS 设备 作为 部 署 平台 


选 好 之 后 ， 单 击 “ 运 行 ”按钮 ， 应 用 程序 就 安装 到 你 的 设备 中 了 ， 就 像 在 模拟 器 上 一 样 。 
你 会 发 现 关闭 应 用 程序 之 后 ， 它 已 经 被 安装 在 主 菜单 中 了 。 

















3.2.3 在 Android 平 台 运 行 React Native 应 用 


为 了 在 Android 平台 运行 React Native 应 用 ， 需 要 做 两 件 事 情 : 首先 打开 模拟 器 ， 然 后 运 
行程 序 。 


之 前 我 们 介绍 过 了 运行 AVD 管理 器 的 方法 (如 图 3-2 所 示 ) : 














android avd 


选择 希望 运行 的 模拟 器 版 本 ， 然 后 点 击 Start… 按钮 。 
另外 ， 也 可 以 通过 命令 行 来 运行 模拟 器 。 通 过 以 下 命令 显示 出 所 有 可 用 的 模拟 器 类 型 : 











emulator -list-avds 





人 过 名 字 和 @ 前 绥 来 运行 它们 ， 例 如 ， 我 有 一 个 名 为 galaxy 的 模拟 器 ， 我 可 以 这 样 来 
运行 它 


emuLator @galaxy 


无 论 采 用 何 种 方式 来 启动 模拟 器 ， 一 旦 启动 成 功 ， 只 需要 在 工程 的 根 目录 运行 如 下 命令 即 
可 加 载 React Native 应 用 : 
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react-native run-android 


3.2.4 小结: 创建 并 运行 项 目 
以 上 文字 涉及 很 多 知识 ， 因 为 我 们 需要 为 React Native 安装 iOS 或 Android 设备 的 各 种 依 
赖 ， 看 上 去 比较 麻烦 。 





好 消息 是 ， 现 在 你 已 经 完成 了 初始 阶段 的 这 些 琐碎 的 工作 ， 接 下 来 就 会 变 得 更 轻松 。 在 
React Native 中 创建 “Hello World”， 只 需要 在 命令 行 运行 react-native init HelloWorld 
即 可 。 


3.3 ”探索 示例 代码 


我 们 已 经 部 署 并 运行 了 默认 的 应 用 程序 ， 接 下 来 看 看 它 是 如 何 工作 的 。 在 这 一 市 中 ， 我 们 
将 深入 到 默认 应 用 的 源 代码 中 去 探索 React Native 项 目的 结构 。 





3.3.1 添加 组 件 到 视图 中 


当 React Native 应 用 启动 之 后 ，React 组 件 是 如 何 被 添加 到 视图 中 的 呢 ? 是 什么 决定 了 组 件 
的 渲染 情况 ? 


问题 的 答案 取决 于 平台 。 我 们 先 来 看 项 目的 iOS 版 本 。 





我 们 可 以 在 AppDelegate.m 文件 中 找到 答案 。 例 3-1 尤其 要 注意 。 





例 3-1: 在 ios/AppDelegate.m 中 声明 根 视图 
RCTRootView *rootView = 
[[RCTRootView alloc] initWithBundleURL:jsCodeLocation 
moduleName:@"FirstProject" 
launchOptions: launchOptions]; 





React Native 库 将 其 所 有 的 类 名 使 用 RCT 作为 前 级 ， 也 就 是 说 RCTRootView 就 是 一 个 React 
Native 类 。 所 以 ，RCTRootView 代表 React Native 的 根 视图 。AppDelegate.m 中 其 他 的 代码 
则 将 视图 添加 到 UIViewController 中 并 泻 染 到 屏幕 上 。 这 个 步骤 与 使 用 React.render 方法 
生 载 React 组 件 到 DOM 节点 上 有 着 异曲同工 之 妙 。 












































眼下 ，AppDelegate.m 文件 有 两 处 应 该 修改 。 


第 一 处 需要 修改 的 地 方 是 jsCodeLocation 这 一 行 ， 之 前 为 了 把 应 用 部 署 到 物理 设备 上 ， 我 
们 修改 过 此 处 。 正 如 代码 中 的 注释 所 示 ， 第 一 种 方式 作为 开发 使 用 ， 第 二 种 方式 用 来 将 预 
打包 文件 部 署 到 硬盘 上 。 现 在 我 们 采用 第 一 种 方式 ,今后 一 旦 需要 部 署 到 应 用 商店 ， 我 们 
会 更 加 详细 地 讨论 这 两 种 方式 。 
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另 一 处 需要 修改 的 地 方 是 moduleName， 它 被 传递 给 RCTRootView 以 决定 哪个 组 件 将 被 挂 载 
到 视图 中 。 这 里 你 可 以 指定 哪些 组 件 需 要 被 程序 演 染 。 
































为 了 使 用 FirstProject 组 件 ， 你 需要 在 React 中 注册 一 个 相同 名 字 的 组 件 。 如 果 打 开 
index.ios.js， 你 会 看 到 代码 的 最 后 一 行 已 经 完成 了 这 项 工作 ( 例 3-2) 。 





例 3-2: 注册 顶层 组 件 

AppRegistry.registerComponent('FirstProject', () => FirstProject); 
以 上 代码 暴露 了 FirstProject 组 件 ， 使 得 我 们 能 够 在 AppDelegate.m 文件 中 使 用 它 。 大 多 
数 情况 下 ， 你 都 不 需要 去 修改 这 个 模板 代码 ， 但 是 我 们 应 该 对 此 有 一 些 了 解 。 
那么 ，Android 平台 是 怎样 的 呢 ? 原理 也 很 类 似 。 如 果 你 查看 MainActivity.java 文件 ， 会 注 
意 到 这 一 行 代码 ( 例 3-3)。 


例 3-3: MainActivity.java 中 Android 的 React 入 口 


mReactRootView.startReactApplication(mReactInstanceManager, "FirstProject", null); 


正如 AppDelegate.m 之 于 iOS，Android 的 MainActivity.java 也 会 查看 AppRegistry 中 绑 定 
到 FirstProject 的 React 组 件 。 





3.3.2 ” ”React Native 中 的 模块 导入 
让 我 们 进一步 观察 index.ios.js 文件 。 如 例 3-4 所 示 ，require 语句 跟 通常 的 用 法 有 一 些 区 别 。 


例 3-4: React Native 中 的 require 语句 ， 导 入 UI 元 素 


var React = require('react-native'); 
var { 

AppRegistry， 

StyleSheet, 

Text, 

View, 
} = React; 


上 面 的 语法 挺 有 趣 的 。 我 们 通过 require 语句 导入 了 React， 但 是 下 一 行 代 码 发 生 了 什么 呢 ? 
React Native 的 使 用 方面 有 一 点 比较 奇特 ， 那 就 是 你 要 导入 所 需 的 每 一 个 组 件 或 模块 。 诸 
如 <div> 之 类 的 标签 是 不 存在 的 ， 如 果 你 需要 使 用 <View> 和 <Text> 等 组 件 ， 就 要 逐一 导 
入 。 像 Stylesheet 和 AppRegistry 这 样 的 库 函 数 也 需要 使 用 以 上 语法 进行 导入 。 一 旦 开始 
开发 自己 的 应 用 ， 我 们 将 会 探索 React Native 提供 的 其 他 库 函 数 ， 同 样 也 是 需要 导入 才能 
使 用 。 


如 果 你 不 熟悉 这 些 语 法 ， 可 以 在 附录 A 中 查看 例 A-2， 它 解释 了 ES6 的 解构 特性 。 
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3.3.3 ”FirstProject 组 件 


让 我 们 看 看 <FirstProject> 组 件 〈 例 3-5)， 代 码 存 在 于 index.ios.js 和 index.a 
中 (它们 是 相同 的 )。 





TT 





ndroid.js 文 从 


这 些 代 码 看 起 来 亲切 而 熟悉 ， 因 为 <FirstProject> 仅仅 是 一 个 普通 的 React 组 件 ， 主 要 的 





不 同 在 于 用 <Text> 和 <View> 代 杰 了 <div> 和 <span>， 并 且 用 对 象 来 表示 样式 





例 3-5: 包含 样式 的 FirstProject 组 件 


var FirstProject = React.createCLass({ 
render: function() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
Welcome to React Native! 
</Text> 
<Text style={styles.instructions}> 
To get started, edit index.ios.js 
</Text> 
<Text style={styles.instructions}> 
Press Cmd+R to reload,{'\n'} 
Cmd+D or shake for dev menu 
</Text> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#FS5FCFF', 
}， 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
}， 
instructions: { 
textAlign: 'center', 
color: '#333333', 
marginBottom: 5， 
}， 
]); 





正如 之 前 所 提 到 的 ，React Native 中 所 有 的 样式 都 采用 样式 对 象 来 代替 传统 的 样式 表 ， 标 











准 的 做 法 就 是 利用 StyLesheet 库 进 行 样式 的 编写 。 你 可 以 在 文件 的 底部 看 到 样式 对 象 是 如 
何 定 义 的 。 需 要 注意 的 是 ，<Text> 组 件 可 以 使 用 文本 特有 的 属性 ， 如 fontsize， 所 有 的 布 





局 样式 都 使 用 flexbox。 我 们 将 在 第 5 章 用 更 多 篇 幅 介 绍 布局 的 内 容 。 








和 2 谤 
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该 示例 应 用 很 好 地 介绍 了 创建 React Native 应 用 的 一 些 基 本 函数 。 它 挂 载 了 React 组 件 用 
于 泻 染 ， 并 介绍 了 React Native 的 基本 样式 和 泻 染 逻辑 ， 同 时 也 可 以 检验 我 们 的 开发 环境 
是 否 被 正确 安装 ， 我 们 还 尝试 将 应 用 部 署 到 真实 设备 上 。 但 它 依然 是 一 个 极其 基础 的 缺乏 
用 户 交 互 的 应 用 ， 接 下 来 让 我 们 尝试 开发 一 个 有 更 多 功能 的 应 用 吧 。 


“二 全 
3.4 ”开发 天 气 应 用 
我 们 将 使 用 示例 程序 来 开发 天 气 应 用 (你 也 可 以 通过 react-native init WeatherProject 
创建 一 个 新 的 示例 工程 )。 这 个 项 目 包 括 如 何 利 用 和 结合 样式 表 、flexbox、 网 络 通 信 、 用 
户 输入 和 图 像 显 示 等 知识 来 开发 一 个 实用 的 应 用 程序 ， 然 后 将 其 部 署 到 Android 或 iOS 设 
备 上 。 


这 部 分 内 容 可 能 会 有 些 含糊 不 清 ， 因 为 我 们 主要 把 精力 集中 在 这 些 特 性 的 用 法 上 ， 而 不 是 
深入 分 析 它们 。 不 用 担心 进度 太 忆 ， 在 后 续 的 章节 中 ， 我 们 会 将 这 个 天 气 应 用 作为 参考 并 
次 入 讨论 这 些 特 性 。 



































天 气 应 用 最 终 的 界面 如 图 3-13 所 示 ， 用 户 可 以 通过 文本 框 输入 邮编 进行 查询 。 该 应 用 利用 
OpenWeatherMap 的 接口 获取 数据 并 展现 当前 天 气 情况 。 
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图 3-13: 天 气 应 用 成 品 
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TT 


我 们 要 做 的 第 一 件 事 就 是 替换 默认 的 代码 。 将 初始 组 件 的 代码 移动 到 WeatherProjectjs 中 ， 
并 修改 index.ios.js 和 index.android.js 文件 的 内 容 ( 例 3-6)。 





例 3-6: 精简 后 的 index.ios.js 和 index.android.js 代码 〈 二 者 保持 一 致 ) 
var React = require('react-native'); 
var { AppRegistry } = React; 
var WeatherProject = require('./Weatherproject'); 
AppRegistry.registerComponent('WeatherProject', () => WeatherProject); 


3.4.1 ”处 理 用 户 输入 
我 们 希望 用 户 通 过 输入 邮编 获取 该 地 区 的 天 气 预 报 ， 因 此 需要 添加 一 个 输入 框 提供 给 用 
户 。 首 先 ， 添 加 默认 邮编 信息 至 组 件 的 初始 状态 (state) 中 ( 例 3-7)。 


例 3-7: 在 render 国 数 前 加 入 这 段 代 码 
getInitialState: function() { 
return { 
ZED 
}; 
} 

















记 住 ，getInitialstate 可 以 让 我 们 创建 React 组 件 的 初始 状态 (state)。 如 果 你 需要 
复习 React 组 件 的 生命 周期 可 以 查看 React 文档 (https://facebook.github.io/react/docs/ 


component-specs.html ) 。 

















接着 ， 修 改 其 中 一 个 <Text> 组 件 的 内 容 为 this. state.zip: 


<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 








我 们 用 同样 的 方式 添加 一 个 <TextInput> 组 件 ( 这 是 一 个 允许 用 户 输入 文本 的 基础 组 件 )。 





<TextInput 
style={styles.input} 
onSubmitEditing={this._handleTextChange}/> 
这 个 <TextInput> 组 件 的 文档 和 属性 可 以 在 React Native 官网 查看 (http://facebook.github. 
io/react-native/docs/textinput.html)。 为 了 监听 一 些 事 件 ， 你 可 以 往 <TextInput> 中 传人 回调 
国 数 ， 如 onChange 和 onFocus， 但 现在 暂时 不 需要 这 么 做 。 


注意 ， 我 们 已 经 为 其 添加 了 样式 ，input 样式 表 如 下 : 

















var styles = StyleSheet.create({ 


input: { 
fontSize: 20， 
borderWidth: 2， 
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height: 40 
} 


DD; 








件 中 的 一 个 函数 : 


_handleTextChange(event) { 
console.log(event.nativeEvent. text); 
this.setState({zip: event.nativeEvent.text}) 


} 








同时 需要 更 新 导入 语句 : 


var React = require('react-native'); 
var { 


TextInput 


} = React; 








在 <TextInput> 组 件 的 属性 (prop) 中 监听 了 onSubmitEditing 事件 





事件 回调 需要 作为 组 


图 中 console 语句 是 外 部 的 ， 如 果 需 要 的 话 ， 可 以 在 调试 工具 里 使 用 该 语句 进行 调试 。 


现在 ,尝试 使 用 iOS 模拟 器 运行 你 的 应 用 。 它 可 能 不 是 很 美观 ， 但 你 应 该 可 以 成 功 地 输入 








一 个 邮编 并 显示 在 <Text> 组 件 上 。 

















如 果 需 要 的 话 ， 也 可 以 对 用 户 的 输入 做 一 个 验证 来 确保 正确 输入 了 五 位 数字 ， 现 在 暂时 


略 过 Le 
例 3-8 展示 了 WeatherProject.js 组 件 的 完整 代码 。 


例 3-8: WeatherProject.js: 这 个 版 本 简单 地 接收 并 记录 用 户 的 输入 
var React = require('react-native'); 
var { 
StyleSheet, 
Text, 
View, 
TextInput， 
Image 
} = React; 


var WeatherProject = React.createClass({ 
// 如 果 你 需要 一 个 默认 的 邮编 ， 你 可 以 在 这 里 添加 一 个 。 
getInitialState() { 
return ({ 
Zp 


}); 














}, 
// 我 们 将 添加 这 个 回调 函数 到 <TextInput> 属 性 中 。 
_handleTextChange(event) { 
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// Log 语 句 输出 结果 在 Xcode 或 Chrome 调 试 工具 中 可 见 。 
console.log(event.nativeEvent. text); 








this.setState({ 
zip: event.nativeEvent.text 
]); 
}， 
render() { 
return ( 
<View style={styles.container}> 
<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 
<TextInput 
style={styles.input} 
onSubmitEditing={this._handleTextChange}/> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#F5FCFF', 
}， 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
}， 
input: { 
fontSize: 20， 
borderwidth: 2， 
height: 40 
} 
]); 


module.exports = WeatherProject; 


3.4.2 ”展现 数据 
现在 ， 我 们 来 开发 根据 邮编 查询 天 气 预报 的 功能 。 首 先 添 加 一 些 mock 数据 (虚拟 的 数据 ) 
到 WeatherProject.js 文件 的 getInitialstate 方法 中 。 


getInitialState() { 
return { 
ZU 
forecast: { 
main: 'Clouds', 
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description: 'few clouds', 
temp: 45.7 
} 
} 
} 





为 了 让 程序 更 加 清晰 ， 我 们 把 天 气 预报 独立 成 一 个 单独 的 组 件 ， 新 建 一 个 名 为 Forecastjs 

















的 文件 〈( 例 3-9 ) 。 


例 3-9: Forecast.js 中 的 Forecast 组 件 


var React = require('react-native'); 
var { 

StyleSheet, 

Text, 

View 
} = React; 


var Forecast = React.createClass({ 
render: function() { 
return ( 
<View> 
<Text style={styles.bigText}> 
{this.props.main} 
</Text> 
<Text style={styles.mainText}> 
Current conditions: {this.props.description} 
</Text> 
<Text style={styles.bigText}> 
{this.props.temp} F 
</Text> 
</View> 
); 
} 
]); 


var styles = StyleSheet.create({ 
bigText: { 
flex: 2， 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
color: '#FFFFFF' 
}， 
mainText: { 
flex: 1， 
fontSize: 16, 
textAlign: 'center', 
color: '#FFFFFF' 
} 
}) 


module.exports = Forecast; 





图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 








兽 

















的 第 一 个 应 用 


31 





<Forecast> 组 件 只 能 基于 它 的 属性 泻 染 一 些 <Text> 文本 ， 我 们 也 会 在 文件 的 末尾 添加 一 些 
简单 的 文本 颜色 之 类 的 样式 。 














导入 <Forecast> 组 件 并 添加 到 render 方法 中 ， 通 过 this.state.forecast 向 它 的 属性 传 入 
数据 ( 例 3-10)。 我 们 稍 后 会 解决 布局 和 样式 问题 。 你 能 在 图 3-14 看 到 <Forecast> 组 件 最 
终 显示 的 效果 。 





例 3-10: WeatherProject.js 中 应 该 加 入 新 的 state 和 Forecast 组 件 


var React = require('react-native'); 
var { 

StyleSheet, 

Text， 

View， 

TextInput， 

Image 
} = React; 


var Forecast = require('./Forecast'); 


var WeatherProject = React.createClass({ 
getInitialState() { 
return { 
ZU 人生 
forecast: { 
main: 'Clouds', 
description: 'few clouds', 
temp: 45.7 
} 
} 

}， 

_handleTextChange(event) { 
console.log(event.nativeEvent. text); 
this.setState({ 

zip: event.nativeEvent.text 
]); 

}， 

render() { 
return ( 

<View style={styles.container}> 
<Text style={styles.welcome}> 
You input {this.state.zip}. 
</Text> 
<Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this. state.forecast. temp}/> 
<TextInput 
style={styles.input} 
returnKeyType="'go' 
onSubmitEditing={this._handleTextChange}/> 
</View> 


); 





图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 








} 
}); 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#4D4D4D', 
由 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
}, 
input: { 
fontSize: 20， 
borderWidth: 2， 
height: 40 
})3 


module.exports = NeatherProject; 





(@lelile ES 


Current conditions: few clouds 


45.7°F 











图 3-14: 目前 的 天 气 应 用 
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3.4.3 ”添加 背景 图 片 
单纯 的 背景 颜色 略 显 单调 。 我 们 接 下 来 为 其 添加 一 个 背景 图 片 。， 


资源 导入 的 方法 是 平台 特定 的 
Android 和 iOS 添加 资源 的 方法 是 不 同 的 。 这 里 我 们 讲解 两 种 方法 。 





像 图片 这 样 的 资源 需要 根据 平台 分 别 导 入 到 你 的 项 目 工程 中 。 我 们 先 看 看 Xcode 如 何 处 理 。 


选择 Images.xcassets/ 目录 ， 然 后 选择 New Image Set 选项 ， 如 图 3-15 所 示 。 然 后 ， 你 可 以 
拖 放 一 张 图 片 到 这 个 图 片 集中 ， 图 3.16 展示 了 最 终 的 效果 。 要 确保 图 片 集 的 名 字 与 文件 名 
保持 一 致 ， 否 则 React Native 可 能 无 法 导入 。 














NAA EL 
New App Icon |_ 
New Launch Image 

New OS X Icon 











图 3-15: 新 建 一 个 图 片 集 











ss p ] 
白 品 AS 三 忆 日 | 盟 | 4 * | WeatherProject) 全] WeatherProject ) MM Images.xcassets ) No Selection aAP 
‘WeatherProject Applcon 
ME argets, iOS SDK 8.1 = sun_flowers 
加 sun_flowers 
i Won ee eR 
h AppDelegate.h Nn | Nr ] NA 


m AppDelegate.m 1x 2x 3x 


© Info.plist Universal 
LaunchScreen.xib 
m main.m 











| 
Y WeatherProject | 
| 
| 
| 
L 





3-16: 拖 放 图 片 至 图 片 集中 


@2x 和 @3x 修饰 符 分 别 表明 图 片 显示 在 基准 分 辨 率 两 倍 或 三 倍 的 屏幕 中 。 由 于 我 们 的 天 
气 应 用 是 一 个 通用 的 软件 (意味 着 一 个 程序 可 以 同时 运行 在 iPhone 或 iPad 中 )，Xcode 赋 
子 了 我 们 针对 不 同 分 辩 率 添加 不 同 图 片 的 能 








注 1: React Native 0.14 版 本 之 后 ， 提 供 了 图 片 统一 的 管理 方式 ， 详 见 http://facebook.github.io/react-native/ 
docs/images.html。 以 下 篇 幅 介 绍 的 是 React Native 0.14 之 前 版 本 的 做 法 ， 如 使 用 最 新 版 本 可 略 过 该 部 
7 译 者 注 
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对 于 Android 系统 ， 我 们 需要 将 图 片 文件 作为 可 绘制 位 图 资源 (bitmap drawable resources ) 
(http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap) 添加 到 
目录 WeatherProject/android/app/src/main/res 中 。 你 需要 将 .png 图 片 添加 到 下 列 特定 分 辨 率 
的 目录 中 (如 图 3-17 所 示 ) : 

















。 drawable-mdpi/ (1x) 
。 drawable-hdpi/ (1.5x) 
。 drawable-xhdpi/ (2x) 
。 drawable-xxhdpi/ (3x) 





res 
drawabLe-hdpi 
[一 fLowers .png 
drawable-mdpi 
[一 flowers.png 
drawable-xhdpi 
[一 flowers.png 
drawable-xxhdpi 
[一 flowers.png 











3-17: 添加 图 片 文件 到 Android 中 
之 后 ， 图 片 就 可 以 在 Android 应 用 中 使 用 了 。 


这 个 工作 流程 可 能 让 你 感觉 不 舒服 ， 这 就 是 它 的 现状 。 不 过 它 很 可 能 在 之 后 版 本 的 React 
Native 中 进行 改进 。 

















既然 文件 已 经 被 导入 到 Android 和 iOS 项 目 中 ， 让 我 们 回 到 React 代码 吧 。 添 加 一 背景 医 
片 时 ， 我 们 不 能 像 在 Web 环境 一 样 为 <div> 标签 设置 属性 ， 而 是 将 <Image> 组 件 作 为 容器 
使 用 : 











<Image source={require('image!flowers')} 
resizeMode=' cover' 
style={styles.backdrop}> 
// 这 里 放置 内 容 。 


</Image> 


<Image> 组 件 期 望 一 个 图 片 源 prop， 我 们 通过 require 进行 3| 入 。 require(image!flowers) 
语句 将 会 触发 React Native 查询 名 为 flowers 的 文件 。 























构建 你 的 第 一 个 应 用 | 35 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





别 忘 了 为 其 样式 添加 flexDirection 属性 ， 使 得 它 的 子 元 素 泻 染 成 我 们 期 望 的 样子 ， 


backdrop: { 
flex: 1， 
flexDirection: "CoLumn' 


3 
现在 为 <Image> 添加 一 些 子 元 素 。 更 新 <Weather Project> 组 件 的 render 方法 为 : 





<Image source={require('image!flowers')} 
resizeMode='cover ' 
style={styles.backdrop}> 
<View style={styles.overlay}> 
<View style={styles.row}> 
<Text style={styles.mainText}> 
Current weather for 
</Text> 
<View style={styles.zipContainer}> 
<TextInput 
style={[styles.zipCode, styles.mainText]} 
returnKeyType='go' 
onSubmitEditing={this._handleTextChange}/> 
</View> 
</View> 
<Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this. state.forecast. temp}/> 
</View> 
</Image> 


你 会 发 现 我 使 用 了 一 些 还 没有 讨论 过 的 样式 ， 例如: row、overlay、zipContainer 和 
zipCode 等 样式 。 你 可 以 跳 到 这 部 分 的 末尾 去 查看 完整 的 样式 表 。 











3.4.4 从 Web 获 取 数 据 


下 一 步 ， 我 们 将 探索 React Native 中 网 络 接口 的 用 法 。 你 不 能 在 移动 设备 中 使 用 jQuery 发 
送 AJAX 请 求 。 然 而 ，React Native 实现 了 Fetch 接口 。 a Promise 的 语法 非常 简洁 : 


fetch('http://www.somesite.com') 
.then((response) => response.text()) 
.then((responseText) => { 
console.log(responseText); 


} 








我 们 将 会 使 用 OpenWeatherMap 的 接口 ， 它 提供 给 我 们 一 个 可 以 根据 邮编 返回 当前 天 气 情 
况 的 简单 的 端点 。 








为 了 集成 这 个 接口 ， 我 们 可 以 修改 <TextInput> 组 件 的 回调 函数 ， 从 而 使 用 
OpenWeatherMap 的 接口 进行 查询 。 
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_handleTextChange: function(event) { 
var zip = event.nativeEvent. text; 
this.setState({zip: zip}); 
fetch('http://api.openweathermap.org/data/2.5/weather?q="' + 
zip + '&units=imperial') 
.then((response) => response.json()) 
.then((responseJSON) => { 
// 如 果 你 愿意 , 可 以 看 看 这 个 格式 。 
console.log(responseJSON); 
this.setState({ 
forecast: { 
main: responseJSON.weather[0].main, 
description: responseJSON.weather[0].description, 
temp: responseJSON.main.temp 
} 
}); 
}) 
.Catch((error) => { 
console.warn(error); 


9 





} 


注意 ， 我 们 需要 从 返回 结果 中 获取 JSON。 使 用 Fetch 接口 是 非常 直观 的 ， 以 上 就 是 我 们 需 
要 做 的 全 部 工作 了 。 


另 一 件 我 们 要 做 的 事 是 移 除 占 位 的 数据 ， 确 保 在 没有 数据 的 时 候 ， 天 气 预 报 组 件 不 会 被 这 染 。 

















首先 ， 从 getInitialstate 中 清除 mock 数据 : 


getInitialState: function() { 
return { 
Zp 人 5 
forecast: null 
}; 


然后 ， 在 render 函数 中 更 新 泻 染 逻辑 : 


var content = null; 
if (this.state.forecast !== null) { 
content = <Forecast 
main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this. state.forecast. temp}/>; 


} 
最 后 ， 在 render 函数 中 使 用 {content} 替换 <Forecast> 组 件 。 


3.4.5 整合 


对 于 这 个 应 用 的 最 后 一 个 版 本 ， 我 重新 组 织 了 <WeatherProject> 组 件 的 render 国 数 并 且 


下 
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调整 了 样式 。 最 大 的 改变 是 布局 逻辑 ， 如 图 











3-18 所 示 。 





Carrier 仿 11:17 PM 


eather for 10001 


Sunny 





4 Width: 









flexDirection: ‘column’ 
| alignltems: Center 
| 








QIWIEJRITIYIUIIIOIP 





AISIDIFIGIHIJIKIL 






















flex: 1, 
alignltems: center 











3-18: 天 气 应 用 最 终 的 布局 


好 ， 准 备 好 查看 整体 代码 了 吗 ? 例 3-11 展示 了 完成 之 后 的 <WeatherProject> 组 件 包括 样 


式 表 在 内 的 完整 代码 。<Forecast> 组 件 仍然 





例 3-11: WeatherProject.js 完整 代码 


var React = require('react-native'); 
var { 
StyleSheet, 
Text， 
View， 
TextInput， 
Image 
} = React; 
var Forecast = require('./Forecast'); 


与 例 3-9 一 致 。 


var WeatherProject = React.createClass({ 


getInitialState: function() { 
return { 
ZU 
forecast: 
}; 
}, 


null 


_handleTextChange: function(event) { 


var zip = event.nativeEvent. text; 
this.setState({zip: zip}); 
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fetch('http://api.openweathermap.org/data/2.5/weather?q=" 
+ Zip + '&units=imperial') 
.then((response) => response.json()) 
.then((responseJSON) => { 
this.setState({ 


forecast: { 
main: responseJSON.weather[0].main, 


description: responseJSON.weather[0].description, 
temp: responseJSON.main.temp 


} 
}); 
}) 


.catch((error) => { 
console.warn(error); 
DD; 
}, 


render: function() { 
var content = null; 
if (this.state.forecast !== null) { 


content = <Forecast 
main={this.state.forecast.main} 


description={this.state.forecast.description} 
temp={this. state.forecast. temp}/>; 


} 
return ( 
<View style={styles.container}> 
<Image source={require('image!flowers')} 
resizeMode=' cover ' 
style={styles.backdrop}> 
<View style={styles.overlay}> 


<View style={styles.row}> 
<Text style={styles.mainText}> 


Current weather for 


</Text> 
<View style={styles.zipContainer}> 


<TextInput 
style={[styles.zipCode, styles.mainText]} 


returnKeyType= 'go 
onSubmitEditing={this._handleTextChange}/> 
</View> 
</View> 
{content} 
</View> 
</Image> 
</View> 
); 
} 
]); 


var baseFontSize = 16; 
var styles = StyleSheet.create({ 
container: { 
flex: 1， 
alignItems: 'center', 
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我 们 已 经 完成 了 所 有 
在 Android 和 iOS 设 


二 
EE: 
3 





[ll 


paddingTop: 30 
}， 
backdrop: { 
flex: 1， 
flexDirection: 'column' 
}， 
overlay: { 
paddingTop: 5， 
backgroundColor: '#000000', 
opacity: 0.5, 
flexDirection: 'column', 
alignItems: 'center' 


flex: 1， 
flexDirection: 'row', 
flexWrap: 'nowrap', 
alignItems: 'flex-start', 
padding: 30 

3 

zipContainer: { 
flex: 1， 
borderBottomColor: '#DDDDDD', 
borderBottomWidth: 1， 
marginLeft: 5， 
marginTop: 3 

}; 

zipCode: { 
width: 50， 
height: baseFontSize, 

}, 

mainText: { 
flex: 1， 
fontSize: baseFontSize, 
color: '#FFFFFF' 

} 


}); 


module.exports = NeatherProject; 


吗 ? 

















的 工作 ， 现 在 尝试 运行 这 个 应 用 。 不 出 意外 的 话 ， 它 将 可 以 同时 运行 
上 上， 无论 是 模拟 器 还 是 真实 物理 设备 皆 可 。 


想 对 它 进 行 修改 或 者 完 


你 可 以 在 GitHub 仓库 查看 完整 的 代码 (https://github.com/bonniee/learning-react-native)。 


3.5 
我 们 开发 的 第 一 个 应 用 涉及 了 很 多 知识 。 本 章 介绍 了 新 的 UI 组 件 


小 结 








<TextInput>， 以 及 





如 何 从 中 获取 用 户 输入 的 信息 。 接 下 来 本 章 解 释 了 如 何在 React Native 中 编写 基本 样式 ， 
以 及 如 何在 应 用 中 加 载 并 使 用 图 片 。 最 后 本 章 讨论 了 如 何 使 用 React Native 网 络 接口 从 外 
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看 版权 


部 网 络 源 中 请 求 数据 。 对 于 我 们 的 第 一 个 应 用 ， 这 已 经 相当 不 错 了 1 


幸运 的 是 ， 这 足以 证 明 你 可 以 使 用 React Native 快速 地 开发 出 具有 原生 体验 的 、 功 能 丰富 
的 移动 应 用 。 


如 有 果 你 想 继续 扩展 这 个 应 用 ， 可 以 尝试 : 











。 添加 更 多 的 图 片 ， 并 根据 天 气 预报 更 换 医 
。 对 邮编 进行 有 效 性 验证 ， 
。 切换 更 便捷 的 小 型 键盘 进行 邮编 输入 
。 展示 最 近 5 天 的 天 气 预 报 。 





| 
































随 着 我 们 学 习 更 多 的 知识 ， 例 如 地 理 位 置 ， 你 将 可 以 为 天 气 应 用 扩展 更 多 的 功能 








当然 ， 这 只 是 一 个 快速 的 概览 。 在 后 面 几 章 中 ， 我 们 将 更 加 深入 地 了 解 React Native 的 最 
佳 实践 ， 并 学 习 使 用 更 多 的 特性 | 
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第 4 章 


移动 应 用 组 件 





在 第 3 章 中 ,我 们 构建 了 一 个 简单 的 天 气 应 用 ， 并 从 中 学 习 了 创建 React Native 界面 的 基 
础 知识 。 在 本 章 中 ， 我 们 将 更 深入 地 了 和 解 React Native 的 移动 应 用 组 件 ， 并 将 其 与 基础 
HTML 元 素 进行 比较 。 相 比 于 网 页 ， 移 动 界面 是 基于 各 种 不 同 的 原始 UI 元 素 而 构造 的 ， 
因此 我 们 需要 使 用 不 同 的 组 件 。 























在 本 章 的 开头 ， 我 们 将 详细 了 解 一 些 最 基础 的 组 件 : <View>、<Image> 和 <Text>， 然 后 讨 
论 触摸 和 手势 怎样 作用 于 React Native 组 件 ， 并 了 解 如 何 处 理 触摸 事件 。 紧 接着 我 们 学 习 
一 些 更 高 阶 的 组 件 ， 例 如 <Listview>、<TabView> 和 <NavigatorView>， 让 你 可 以 组 合 这 些 
视图 开发 出 符合 界面 规范 的 移动 应 用 。 


4.1 类 比 HTML 元 素 与 原生 组 件 


当 开发 Web 应 用 时 ， 我 们 使 用 各 种 基础 的 HTML 元 素 ， 例 如 <div>、<span> 和 <img>， 还 
有 各 种 组 织 元 素 : <ol>、<ul> 和 <table>。( 也 可 以 邯 虑 像 <audio>、<svg>、<canvas> 等 元 
素 ， 但 此 处 暂时 忽略 它们 。) 


在 React Native 中 ， 我 们 不 使 用 这 些 HTML 元 素 ， 但 使 用 类 似 于 它们 的 各 种 组 们 
( 表 4-1) 。 
































你 
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表 4-1: 类 比 HTML 和 原生 组 件 





HTML React Native 

div View 

img Image 

span,p Text 

ul/ol, Li ListView, child items 





虽然 这 些 元 素 有 相似 的 作用 ， 但 它们 不 可 以 相互 替换 。 让 我 们 来 看 这 些 组 件 是 如 何在 
React Native 的 应 用 中 工作 的 ， 并 了 解 它 们 与 浏览 器 场景 有 什么 区 别 。 








React Native 和 Web 应 用 的 代码 可 以 共享 吗 ? 


很 遗憾，React Native 基础 组 件 目前 不 能 澄 染 成 基础 的 HTML 元 素 。 你 的 React Native 
代码 可 以 在 iOS 和 Android 中 复 用 (以 及 React Native 未 来 的 其 他 平台 )， 但 它 不 能 
演 染 出 兼容 浏览 器 的 视图 。 然 而 ， 和 包含 React 组 件 在 内 的 任何 不 参与 基础 元 素 演 染 的 
JavaScript 代码 都 可 以 被 复 用 。 因 此 ， 如 果 你 的 业务 逻辑 独立 于 演 染 的 代码 ， 你 可 以 进 
行 代码 复 用 。) 











4.1.1 文本 组 件 
泻 染 文本 看 似 是 一 个 非常 基础 的 功能 ， 儿 乎 所 有 的 应 用 都 需要 在 茶 些 地 方 泻 染 文本 。 然 
而 ， 在 React Native 环境 和 移动 开发 中 的 文本 泻 染 与 Web 环境 大 相 径 庭 。 























当 我 们 在 HTML 中 处 理 文本 时 ， 可 以 将 原始 文本 包含 在 各 种 元 素 中 ， 并 且 还 可 使 用 像 
<strong> 和 <em> 这 样 的 子 标签 为 文本 添加 样式 。 因 此 ， 你 可 以 写 出 下 面 这 样 的 HIML 代码 : 




















7 











<p>The quick <em>brown</em> fox jumped over the lazy <strong>dog</strong>.</p> 


在 React Native 中 ， 仅 有 <Text> 组 件 可 以 将 纯 文本 作为 子 节 点 。 换 言 之， 这 样 是 无 效 的 : 





<View> 
Text doesn't go here! 
</View> 


应 该 把 文本 用 <Text> 组 件 包装 起 来 。 





<View> 
<Text>This is OK!</Text> 
</View> 














在 React Native 中 使 用 <Text> 组 件 时 ， 我 们 再 也 不 能 使 用 <strong> 和 <em> 这 样 的 子 标签 ， 











注 1: 目前 有 React Native 与 React Web 代码 共享 的 开源 解决 方案 ， 例 如 react-web。 一 一 译 者 广 
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但 是 可 以 应 用 样式 中 的 fontweight 和 fontstyte 等 属性 来 达到 相似 的 效果 。 以 下 是 使 用 内 
联 样式 达到 的 效果 : 








<Text> 
The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox 
jumped over the Lazy <Text style={{fontWeight: "bold"}}>dog</Text>. 
</Text> 














但 是 这 样 的 方法 很 快 会 让 代码 变 得 元 长 。 处 理 文本 时 ， 你 应 该 会 想 创建 一 种 便于 速记 的 样 
式 组 件 ， 如 例 4-1 所 示 。 


例 4-1: 为 文本 样式 创建 可 复 用 组 件 
var styles = StyleSheet.create({ 


bold: { 
fontWeight: "bold" 








}， 
italie{ 
fontStyle: "italic" 
} 
]); 
var Strong = React.createClass({ 
render: function() { 
return ( 
<Text style={styles.bold}> 
{this.props.children} 
</Text>); 


} 
1 


var Em = React.createClass({ 
render: function() { 
return ( 
<Text style={styles.italic}> 
{this.props.children} 
</Text>); 


} 
3 
一 旦 声明 了 这 些 样式 组 件 ， 你 就 可 以 自由 地 使 用 样式 藤 套 。 现 在 React Native 版 本 已 经 和 
HTML 版 本 很 相似 了 ( 例 4-2)。 


例 4-2: 使 用 样式 组 件 演 染 文本 
<Text> 
The quick <Em>brown</Em> fox jumped 
over the lazy <Strong>dog</Strong>. 
</Text> 





同样 ，React Native 也 没有 header 元 素 (h1、h2 等 ) 这 样 的 概念 ， 但 在 需要 的 时 候 很 容易 
定义 自己 的 <Text> 样式 。 
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总 体 来 说 ， 当 你 需要 应 付 字 体 样式 问题 时 ，React Native 强制 改变 你 原先 的 方法 。 样 式 的 
继承 是 有 限 的 ， 因 此 你 无 法 获得 泻 染 树 中 所 有 文本 节点 的 默认 字体 设置 。 前 面 已 经 提 到 ， 
Facebook 建议 通过 使 用 样式 组 件 来 解决 这 个 问题 : 








你 也 失去 了 为 整 棵 子 树 设 置 默认 字体 的 能 力 。 我 们 推荐 在 应 用 中 创建 并 使 用 一 个 
统一 字体 和 尺寸 的 MyAppText 组 件 ， 以 此 来 确保 字体 样式 的 一 致 性 。 你 也 可 以 
在 此 基础 上 为 其 他 的 字体 样式 创建 更 具体 的 组 件 ， 例 如 MyAppHeaderText。 





一 一 ReactNative 文档 





官方 文档 的 文本 组 件 部 分 (https://facebook.github.io/react-native/docs/text.html#limited-style- 
inheritance) 有 更 多 这 方面 的 细节 。 














你 可 能 注意 到 这 里 的 一 个 模式 : React Native 坚持 自己 的 偏好 ， 提 倡 样式 组 件 的 复 用 而 不 
是 样式 的 复 用 。 我 们 将 在 下 一 章 更 深入 地 讨论 这 些 内 容 。 














4.1.2 图片 组 件 

如 果 说 文本 是 移动 或 Web 应 用 中 最 基础 的 元 素 ， 那 么 图 片 元 素 也 不 例外 。 当 在 Web 环 
境 中 编写 HIML 和 CSS 时， 我们 可 以 通过 多 种 方式 添加 图 片 : 有 时 我 们 使 用 <img> 标 
签 ， 有 时 通过 CSS 导入 ， 如 background-image 属性 。 在 React Native 中 ， 我 们 也 有 相似 的 
<Image> 组 件 ， 但 是 它 有 些 不 大 一样。 











<Image> 组 件 的 基础 用 法 是 很 直观 的 。 只 需 设置 prop 的 source 属性 : “ 
<Image source={require('image!puppies')} /> 


这 个 require 语句 是 如 何 工 作 的 呢 ? 这 些 资 源 存在 何 处 呢 ? 在 React Native 中 ， 你 需要 根 
据 目标 平台 进行 调整 ， 这 是 其 中 一 个 例子 。 在 ioS 平台 ， 意 味 着 你 需要 通过 指定 合适 的 
@2x、@3x 分 辩 率 文件 并 导入 资源 文件 到 Xcode 项 目 中 ， 这 样 才能 在 Xcode 中 允许 通过 不 
同 平台 选择 正确 的 资源 文件 。 这 对 于 Web 开发 来 说 是 个 不 错 的 改进 ，iOS 相对 固定 的 屏幕 
尺寸 和 分 辩 率 的 组 合 使 得 可 以 更 容易 地 创建 目标 资源 。 

















对 于 其 他 平台 的 React Native 来 说 ， 我 们 期 望 image! 语法 找 出 资源 目录 。 


值得 一 提 的 是 ， 基 于 Web 的 图 片 资源 可 以 被 导入 ， 而 无 需 打 包 图 片 到 应 用 中 。Facebook 
将 以 下 代码 作为 UIExplorer 中 的 一 个 示例 : 





<Image source={{uri: 'https://facebook.github.io/react/img/logo_o0g.png'}} 
style={{width: 400, height: 400}} /> 











注 2: 自 React Native 0.14 版 本 后 ， 改 为 了 更 加 方便 的 用 法 ， <Image source={require ('. / my-icon.png')} / >。 
译 者 注 
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当 使 用 网 络 资源 时 ， 需 要 手动 指定 图 片 尺寸 。 


通过 网 络 下 载 而 不 是 作为 资源 导入 的 方式 有 一 些 优 点 。 例 如 : 在 开发 期 间 ， 采 用 这 种 方法 
可 以 更 容易 地 完成 项 目 原型 ， 而 无 需 提 前 小 心经 翼 地 导入 所 有 资源 。 同 时 ， 它 也 减 小 了 应 
用 体积 ， 用 户 无 需 下 载 你 所 有 的 资源 文件 。 然 而 ， 这 意味 着 今后 无 论 何 时 用 户 使 用 你 的 应 
用 都 要 依赖 数据 流量 。 因 此 在 多 数 情 况 下 ， 你 都 应 该 避免 使 用 基于 URI 的 方式 。 























如 果 你 好 奇 如 何 使 用 用 户 自己 的 图 片 ， 请 看 第 6 章 。 








由 于 React Native 强调 了 基于 组 件 的 开发 方式 ， 因 此 图 片 必须 包含 在 <Image> 组 件 中 ， 而 
不 允许 通过 样式 进行 导入 。 例 如 在 第 3 章 中 ， 我 们 想 要 在 天 气 应 用 中 使 用 一 张 图 片 作为 背 
景 。 不 像 HTML 和 CSS 那样 可 以 使 用 background-image 属性 来 添加 背景 ，React Native 使 
用 <Image> 作为 容器 组 件 ， 就 像 这 样 : 























<Image source={require('image!puppies')}> 
{/* Your content here... */} 
</Image> 














为 图 片 添加 样式 是 相对 容易 的 。 除 了 应 用 样式 ， 你 还 可 以 通过 特定 的 属性 控制 图 片 的 这 
染 行 为 。 例 如 ， 你 可 能 会 经 常用 到 resizeMode 属性 ， 它 可 以 被 设置 为 stretch、cover 和 
contain。UIExplorer 示例 程序 也 很 好 地 解释 了 这 个 属性 (图 4-1)。 





























Resize Mode 
The ‘resizeMode style prop controls how the image 
is rendered within the frame. 


Contain Cover Stretch 


4-1: stretch、cover 和 contain 的 区 别 




















<Image> 组 件 灵 活 易 用 ， 你 可 以 在 自己 的 应 用 中 广泛 使 用 。 


4.2 处理 触摸 和 手势 


基于 Web 的 界面 通常 是 为 鼠标 控制 而 设计 的 。 我 们 使 用 如 hover 这 样 的 状态 来 进行 动态 
变换 ， 并 对 用 户 的 交互 行为 作出 反馈 。 对 于 移动 应 用 而 言 ， 触 摸 则 至 关 重 要 。 移 动 平台 对 
于 你 想 要 设计 的 界面 有 一 套 自己 的 规范 ， 这 个 规范 因 平台 而 不 同 : iOS 和 Android 不 同 ， 
Windows Phone 则 跟 它 们 又 不 一 样 。 
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React Native 提供 了 许多 API (应 用 编程 接口 )， 你 可 以 使 用 这 些 API 开发 可 触摸 的 界面 。 
在 这 一 节 中 ， 我 们 将 要 学 习 <TouchableHighlight> 这 个 容器 组 件 ， 由 PanResponder 提供 的 
低层 API， 以 及 手势 响应 系统 。 








4.2.1 使 用 TouchableHighlight 


任何 能 响应 用 户 触 摸 事 件 的 界面 元 素 (按钮 、 控 制 元 素 等 ) 通常 都 需要 用 
<TouchableHighlight> 包装 起 来 。 当 视图 元 素 被 触摸 上 时 ，<TouchableHighlight> 会 产生 一 
个 又 层 ， 给 予 用 户 视 觉 反馈 。 这 是 其 中 一 个 关键 性 的 交互 功能 ， 它 能 让 应 用 具备 原生 体 
验 ， 不 像 那些 针对 移动 优化 的 网 站 仅 提 供 有 限 的 触摸 反馈 。 根 据 我 的 经 验 ， 无 论 哪 里 需要 
一 个 类 似 Web 平台 上 的 按钮 或 者 链接 ， 你 都 可 以 使 用 <TouchableHighlight>。 



































<TouchableHighlight> 最 基础 的 用 法 就 是 用 它 将 组 件 包 装 起 来 ， 之 后 按 下 它 时 就 会 产生 
一 个 简单 的 又 层 效 果 。<TouchableHighlight> 组 件 同时 也 为 像 onPressIn、onPress0ut、 
onLongPress 这 样 的 事件 提供 了 钧 子 ， 因 此 可 以 在 React 应 用 中 使 用 这 些 事件 。 























例 4-3 展示 了 如 何 使 用 <TouchableHighlight> 包装 组 件 ， 以 便 为 用 户 提供 交互 反馈 。 


例 4-3: 使 用 <TouchableHighlight> 组件 


<TouchableHighlight 
onPressIn={this._onPressIn} 
onPressOut={this._onpressOut} 
style={styles.touchable}> 
<View style={styles.button}> 
<Text style={styles.welcome}> 
{this.state.pressing ? 'EEK!' : 'PUSH ME'} 
</Text> 
</View> 
</TouchableHighlight> 


当 用 户 轻 触 按 钮 时 ， 会 产生 受 层 并 改变 文字 (图 4-2)。 











这 是 一 个 很 勉强 的 例子 ， 但 它 解释 了 一 个 基础 的 交互 ， 即 如 何 让 移动 应 用 中 的 按钮 让 人 感 
觉 是 可 触摸 的 。 倒 层 是 让 用 户 感 觉 元 素 可 触摸 的 一 个 关键 的 因素 。 注 意 ， 为 了 添加 这 样 一 
个 厨 层 ， 我 们 不 需要 为 样式 编写 任何 逻辑 ，<TouchableHighlight> 组 件 为 我 们 处 理 了 各 种 
逻辑 。 
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图 4-2: 使 用 <TouchableHighlight> 为 用 户 提供 视觉 反馈 一 一 未 按 下 状态 ( 左 )、 按 下 状态 ( 右 )、 
带 有 高 亮 〈 右 ) 


例 4-4 展示 了 这 个 按钮 组 件 的 完整 代码 。 


例 4-4: Touch/PressDemo.js 说 明了 <TouchableHighlight> 的 用 法 


"use strict'; 


var React = require('react-native'); 
var { 

StyleSheet, 

Text， 

View， 

TouchableHighlight 
} = React; 


var Button = React.createClass({ 
getInitialState: function() { 
return { 
pressing: false 
} 
]， 


_onPressIn: function() { 
this.setState({pressing: true}); 
}, 


_onPressOut: function() { 
this.setState({pressing: false}); 
}, 
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render: function() { 
return ( 
<View style={styles.container}> 
<TouchableHighlight 
onpPressIn={this._ onPressIn} 
onpressOut={this._onpressOut} 
style={styles.touchable}> 


<View style={styles.button}> 
<Text style={styles.welcome}> 
{this.state.pressing ? 'EEK!' : 'PUSH ME'} 
</Text> 
</View> 


</TouchableHighlight> 
</View> 
); 
} 
中 7 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#F5FCFF', 
}， 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
color: '#FFFFFF' 
}， 
touchable: { 
borderRadius: 100 
}， 
button: { 
backgroundColor: “#FF0000 ' ， 
borderRadius: 100， 
height: 200， 
width: 200, 
justifyContent: 'center' 
}， 
]); 


module.exports = Button; 


尝试 编辑 这 个 按钮 ， 使 其 对 其 他 事件 作出 响应 ， 例 如 onpress 或 onLongpress。 想 了 解 这 些 
事件 与 用 户 交互 的 对 应 关系 ， 最 佳 途径 就 是 使 用 真实 设备 进行 试验 。 



































4.2.2 GestureResponder 系 统 
如 果 你 想 要 更 多 的 交互 ， 而 不 仅仅 是 轻 触 的 话 ，React Native 也 暴露 了 两 个 API 用 来 处 理 
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触摸 逻辑 : GestureResponder 和 PanResponder。GestureResponder 是 一 个 低层 的 接口 ， 而 
PanResponder 提供 了 一 些 实用 的 抽象 。 我 们 首先 将 了 解 GestureResponder (手势 响应 ) 系 
统 的 用 法 ， 因 为 它 是 PanResponder 接口 的 基础 。 


移动 设备 上 的 触摸 是 相当 复杂 的 ， 大 多 数 的 移动 平台 都 支持 多 点 触 控 ， 这 意味 着 在 同一 时 
刻 屏 幕 上 会 存在 多 个 有 效 的 触摸 点 〈 这 些 触摸 点 不 一 定 都 是 手指 ， 想 象 一 下 ， 也 可 能 是 用 
户 的 手掌 碰 到 屏幕 的 边缘 部 分 )。 并 且 ， 如 何 确定 哪个 视图 来 处 理 触摸 事件 呢 ? 这 个 问题 
与 Web 平台 上 鼠标 事件 的 处 理 有 些 相 似 ， 黑 认 的 行为 也 很 相似 ， 即 默认 由 最 顶层 的 子 节 点 
来 处 理 触摸 事件 。 但 是 使 用 React Native 的 手势 响应 系统 ， 如 有 果 需 要 的 话 ， 我 们 可 以 覆盖 
默认 的 行为 。 









































触摸 响应 器 (touch responder) 是 处 理 特定 触摸 事件 的 视图 。 前 面 我 们 看 到 <Touchable- 
Highlight> 组 件 扮演 了 触摸 响应 器 的 角色 。 当 然 ， 我 们 也 可 以 指定 自己 的 组 件 为 触摸 响应 
器 。 协 商 过 程 的 生命 周期 有 一 点 复杂 ， 如 果 一 个 视图 想 进 入 触摸 响应 器 状态 ， 则 需要 实现 
以 下 四 个 属性 : 



































。 View.props.onStartShouldSetResponder 
。 View.props.onMoveShouldSetResponder 
。 View.props.onResponderGrant 


。 View.props.onResponderReject 


为 了 确定 哪个 视图 进入 响应 状态 ， 它 们 需要 根据 以 下 流程 图 (图 4-3) 进行 协调 。 




















触摸 开始 





View.props.onStartShouldSetResponder 






View.props.onResponderGrant 





View.props.onResponderReject 


4-3: 获取 触摸 响应 器 状态 


呀 ， 这 看 起 来 很 复杂 ! 让 我 们 一 起 来 梳理 一 下 。 首 先 ， 触 摸 事 件 有 三 个 主要 的 生命 周期 阶 
段 : 开始 、 移 动 和 释放 (相当 于 浏览 器 中 的 mouseDown、mouseMove 和 mouseUp) 。 一 个 视 














/| 
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可 以 在 开始 或 者 移动 阶段 请 求 成 为 触摸 响应 器 ， 这 个 行为 通过 onStartShouldSetResponder 
和 onMoveShouldSetResponder 来 指定 。 当 其 中 一 个 函数 返回 true， 这 个 视图 就 尝试 申请 进 
入 响应 状态 。 

一 个 视图 尝试 申请 响应 状态 之 后 ， 它 可 能 被 准许 也 可 能 被 拒绝 ， 相 应 的 回调 函数 
onResponderGrant 或 onResponderReject 就 会 被 调用 。 




















| 





响应 器 的 协调 函数 采用 冒 泡 的 形式 进行 调用 。 也 就 是 说 ， 如 果 多 个 视图 都 尝试 申请 进入 啊 
应 状态 ， 那 么 典 套 最 深 的 组 件 就 会 成 为 响应 器 。 这 通常 是 我 们 想 要 的 行为 ， 否 则 ， 你 将 
很 难 在 一 个 大 视图 内 添加 可 触摸 的 按钮 组 件 。 如 果 你 想 覆 盖 这 个 行为 ， 父 组 件 可 以 使 用 
onStartShouldSetResponderCapture 和 onMoveShouldSetResponderCapture 国 数 ， 从 而 阻止 
子 组 件 成 为 触摸 响应 器 。 


视图 成 功 申请 到 响应 状态 之 后 ， 它 相应 的 时 间 处 理 器 将 会 被 调用 。 以 下 是 官方 文档 中 手势 
响应 器 的 摘要 (http:/facebook.github.io/react-native/docs/getting-started.html) 。 









































。 View.props.onResponderMove 


用 户 正在 移动 手指 。 





。 View.props.onResponderReLease 


触摸 结束 被 调用 (也 就 是 “touchUp”)。 





。 View.props.onResponderTerminationRequest 


其 他 元 素 想 成 为 响应 器 。 当 前 视图 应 该 释放 吗 ? 返回 true 则 允许 释放 。 

















。 View.props.onResponderTerminate 
响应 器 被 收回 之 后 调用 。 它 可 能 被 其 他 视图 通过 调用 onResponderTerminationRequest 
收回 ， 或 被 操作 系统 强制 收回 (iOS 的 控制 中 心 或 消息 通知 )。 




















大 多 数 情况 下 ， 主 要 处 理 的 是 onResponderMove 和 onResponderRelease 方法 。 


所 有 这 些 方法 都 接收 一 个 合成 的 触摸 事件 对 象 ， 附 带 以 下 格式 (同样 摘录 于 文档 )。 








。 changedTouches 


在 上 一 次 事件 之 后 ， 所 有 发 生变 化 的 触摸 事件 的 数组 集合 。 


。 identifier 


触摸 点 的 标识 符 。 


。 LocationX 


触摸 点 相对 于 父 元 素 的 横 坐 标 。 
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。 locationY 


触摸 点 相对 于 父 元 素 的 纵 坐 标 。 





。 pageX 
触摸 点 相对 于 屏幕 的 横 坐 标 。 


。 pageY 
触摸 点 相对 于 屏幕 的 纵 坐 标 。 





。 target 
接受 触摸 事件 的 元 素 节 点 的 标识 符 。 
。 timestamp 


触摸 事件 的 时 间 惟 ， 可 用 于 移动 速度 的 计算 。 





。 touches 


当前 屏幕 上 所 有 触摸 点 的 集合 。 


当 你 需要 决定 是 否 响 应 触摸 事件 时 ， 可 以 利用 上 面 这 些 信息 。 例 如 ， 你 的 视图 也 许 只 关心 
两 个 手指 的 触摸 。 


这 是 相当 低层 的 接口 ， 如 果 你 ee 可 能 需要 一 些 时 间 
来 调整 正确 的 参数 ， 并 乔 懂 哪 些 值 是 你 应 该 关注 的 。 在 下 一 六 ,我 们 将 了 解 PanResponder， 
它 提 供 了 一 个 用 户 手势 更 高 层 的 抽象 。 


当 
























































4.2.3 PanResponder 


不 像 <TouchableHighlight>，PanResponder 并 不 是 一 个 组 件 ， 而 是 React Native 的 一 个 类 ， 
它 提供 了 处 理 原 生 事 件 相 对 高 层 的 接口 。 如 官方 文档 (http://facebook.github.io/react-native/ 
docs/getting-started.html) 所 述 ，PanResponder gestureState 对 象 为 你 提供 了 以 下 信息 。 














e stateID 

gestureState 的 标识 符 (只 要 屏幕 上 至 少 有 一 个 触摸 点 就 会 被 保留 ) 。 
。 moveX 

最 近 一 次 触摸 移动 时 的 屏幕 横 坐 标 。 


。 moveY 


最 近 一 次 触摸 移动 时 的 屏幕 纵 坐 标 。 





。 x0 


当 响 应 器 产生 时 的 屏幕 坐标 。 
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。 y0 
当 响 应 器 产生 时 的 屏幕 坐标 。 


。 dx 


从 触摸 操作 开始 时 的 累计 横向 路 程 。 





。 dy 
从 触摸 操作 开始 时 的 累计 纵向 路 程 。 








® VX 


当前 的 横向 移动 速度 。 


。 Vy 


当前 的 纵向 移动 速度 。 





。 numberActiveTouches 


当前 屏幕 上 的 有 效 触摸 点 数量 。 


正如 你 所 看 到 的 ， 除 原始 位 置 的 数据 之 外 ，gesturestate 对 象 也 包含 了 如 当前 触摸 的 速度 
和 球 计 的 距离 等 信息 。 


为 了 在 组 件 中 使 用 PanResponder ， 我 们 需要 创建 一 个 PanResponder 对 象 ， 然 后 将 它 附加 到 
render 方法 中 的 组 件 上 。 

















创建 一 个 PanResponder 需要 我 们 为 它 指定 对 应 的 处 理 函 数 〈 例 4-5)。 





例 4-5: 创建 PanResponder ， 需 要 传人 一 些 回调 函数 


this._panResponder = PanResponder .create({ 
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder, 
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder, 
onPanResponderGrant: this._handlePanResponderGrant, 
onPanResponderMove: this._ handlePanResponderMove, 
onPanResponderRelease: this._handlePanResponderEnd, 
onPanResponderTerminate: this._handlePanResponderEnd, 


) 3 


然后 ， 使 用 传播 语法 (spread syntax) 将 PanResponder 添加 到 render 方法 内 的 组 件 视图 上 
( 例 4-6) 。 








例 4-6: 使 用 传播 语法 添加 PanResponder 


render: function() { 
return ( 
<View 
{...this._panResponder .panHandlers}> 
{ /* 这 里 是 视图 内 容 */ } 
</View> 
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); 
} 
之 后 ， 如 果 你 的 触摸 起 始 于 视图 内 ， 那 么 传人 到 PanResponder .create 的 处 理 函 数 将 会 在 
相应 的 移动 事件 发 生 时 被 调用 。 


例 4-7 展示 了 一 个 修改 版 的 PanResponder 的 React Native 示例 代码 。 这 个 版 本 监听 容器 视 
图 内 的 触摸 事件 ， 而 不 仅仅 是 圆 形 区 域内 。 因 此 ， 当 与 应 用 互动 时 ， 你 会 看 到 数值 被 输出 
到 屏幕 上。 如 果 你 打算 自己 实现 手势 识别 功能 ， 建 议 你 在 真实 设备 上 试验 这 个 应 用 ， 这 样 
你 就 可 以 知道 这 些 值 是 怎样 响应 的 。 图 4-4 展示 了 这 个 例子 的 截图 ， 但 建议 你 在 有 触 屏 的 
设备 上 感受 一 下 。 
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1touches, dx: 280, dy: 223, vx: 0.11848977240803385, vy: 
0.029622443102008462 











图 4-4， PanResponder 演示 
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例 4-7: Touch/PanDemo.js 说 明了 PanResponder 的 用 法 


// 改编 自 
// https://github.com/facebook/react-native/blob/master/ 
// Examples/UIExplorer/PanResponderExample.js 


"use strict'; 


var React = require('react-native'); 
var { 

StyleSheet, 

PanResponder ， 

View， 

Text 
} = React; 


var CIRCLE_SIZE = 40; 
var CIRCLE_COLOR = "blLue '; 
var CIRCLE_HIGHLIGHT_COLOR = 'green'; 


var PanResponderExample = React.createClass({ 


// 设置 一 些 初始 值 。 
_panResponder: {}, 
_previousLeft: 0， 
_previousTop: 0， 
_circleStyles: {}, 
circle: null, 


getInitialState: function() { 


return { 
numberActiveTouches: 0， 
moveX: 0， 
moveY: 0， 
x0: 0， 
y0: 0， 
dx: 0， 
dy: 0， 
Vx: 0， 
vy: 0， 

} 

二 


componentWillMount: function() { 
this. panResponder = PanResponder .create({ 

onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder, 
onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder, 
onPanResponderGrant: this._handlePanResponderGrant, 
onPanResponderMove: this._handlePanResponderMove, 
onPanResponderRelease: this. handlePanResponderEnd, 
onPanResponderTerminate: this._handlePanResponderEnd, 


}); 


this. previousLeft = 20; 
this. previousTop = 84; 
this. circleStyles = { 





移动 应 用 组 件 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





55 


Left: this. previousLeft, 
top: this._previousTop, 
}; 
]， 


componentDidMount: function() { 
this._updatePosition(); 


}， 


render: function() { 
return ( 
<View style={styles.container}> 
<View 
ref={(circle) => { 
this.circle = circle; 
} 
style={styles.circle} 
{...this._panResponder .panHandlers}/> 
<Text> 
{this.state.numberActiveTouches} touches, 
dx: {this.state.dx}, 
dy: {this.state.dy}, 
vx: {this.state.vx}, 
vy: {this.state.vy} 
</Text> 
</View> 
); 
]， 


// _highlight 和 _unHighlight 被 PanResponder 方 法 调用 ， 
// 给 用 户 提供 视觉 反馈 。 
_highlight: function() { 
this.circle && this.circle.setNativeprops({ 
backgroundColor: CIRCLE_HIGHLIGHT_COLOR 
})s 
}, 























_unHighlight: function() { 
this.circle && this.circle.setNativeprops({ 
backgroundColor: CIRCLE_COLOR 
}); 
}， 


// 我 们 使 用 setNativeProps 直 接 控制 圆 形 的 位 置 。 
_UpdatepPosition: function() { 
this.circle && this.circle.setNativeprops(this. circleStyles); 


}, 





_handleStartShouldSetPanResponder: 
function(e: Object, gestureState: Object): boolean { 
// 当 用 户 按 下 圆 形 时 ,应 该 被 激活 吗 ? 


return true; 








}， 


_handLeMoveShouLdSetPanResponder : 
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function(e: Object, gestureState: Object): boolean { 


// 当 用 户 触摸 并 移动 圆 形 时 ,需要 被 激活 吗 ? 
return true; 


}， 











_handLePanResponderGrant: function(e: Object, gestureState: Object) { 


this. highlight(); 
}; 


_handLePanResponderMove: function(e: Object, gestureState: Object) { 


this.setState({ 

stateID: gestureState.statelID, 
moveX: gestureState.moveX, 
moveY: gesture9tate.moveY， 

x0: gestureState.x0, 

y0: gestureState.y0, 

dx: gestureState.dx, 

dy: gestureState.dy, 

vx: gestureState.vx, 

Vy: gestureState.vy, 


numberActiveTouches: gestureState.numberActiveTouches 


下 这 
// 使 用 差 值 计算 当前 位 置 。 


this. circleStyles.left = this. previousLeft + gestureState.dx; 
this._circleStyles.top = this._ previousTop + gestureState.dy; 


this._updatePosition(); 


}, 


_handLePanResponderEnd: function(e: Object, gestureState: Object) { 


this._unHighlight(); 
this._previousLeft += gestureState.dx; 
this._previousTop += gestureState.dy; 
}， 
]); 


var styles = StyleSheet.create({ 
circle: { 
width: CIRCLE_SIZE, 
height: CIRCLE_SIZE, 
borderRadius: CIRCLE_SIZE / 2， 
backgroundColor: CIRCLE_COLOR, 
position: 'absolute', 
Left: 0， 
top: 0， 
}, 
container: { 
flex: 1， 
paddingTop: 64， 
3 
})3 


module.exports = PanResponderExample; 
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选择 处 理 触摸 的 方法 
当 使 用 上 一 节 讨 论 的 触摸 和 手势 接口 时 ， 你 应 该 如 何 选择 呢 ? 这 取决 于 你 想 开发 什么 样 的 
应 用 。 


为 了 给 用 户 提 供 基 础 的 反馈 ， 指 明 一 个 按钮 或 其 他 元 素 是 可 触摸 的 ， 你 可 以 使 用 
<TouchableHighlight> 组 件 。 








为 了 实现 自己 定制 的 触摸 界面 ， 你 可 以 使 用 原始 的 手势 响应 系统 或 PanResponder。 大 多 数 
情况 下 ， 你 应 该 更 常用 PanResponder 方法 ， 因 为 它 也 提供 了 基于 手势 响应 系统 的 更 简单 的 
触摸 事件 。 如 有 果 要 设计 一 款 游戏 ， 或 者 一 款 有 着 与 众 不 同 的 界面 的 应 用 ， 那 就 应 该 花 一 些 
时 间 使 用 这 些 接口 开发 你 想 要 的 交互 方式 。 


对 于 许多 应 用 来 说 ， 根 本 不 需要 使 用 手势 响应 系统 或 PanResponder 来 定制 任何 触摸 处 理 
数 。 在 下 一 市 中 ， 我 们 将 接触 一 些 更 高 级 的 组 件 ， 这 些 组 件 实现 了 通用 的 UI 模式 。 


4.3 ”使 用 结构 化 组 件 


在 这 一 节 中 ， 我 们 将 了 解 结构 化 组 件 ， 并 用 它 来 控制 应 用 的 总 体 流 加。 结构 化 组 件 包括 
<TabView>、<NavigatorView> 以 及 <ListView> 等 ， 它 们 都 实现 了 一 些 移动 应 用 中 常见 的 交 
互 和 导航 方式 。 一 旦 确定 了 应 用 导航 的 流 则 ， 你 会 发 现 这 些 组 件 在 应 用 实现 过 程 中 会 提供 
很 大 的 帮助 。 





























FE 
Ea 




















4.3.1 使 用 ListView 
让 我 们 从 <Listview> 组 件 的 使 用 学 起 。 在 这 一 部 分 ， 我 们 将 会 开发 一 个 《纽约 时 报 》 畅 销 
图 书 列表 的 应 用 ， 并 可 以 查看 每 一 本 图 书 的 数据 ， 如 图 4-5 所 示 。 如 果 你 愿意 的 话 ， 可 以 
自己 从 《纽约 时 报 》 网 站 (http://developer.nytimes.com/apps/mykeys) 抓 取 接口 ， 或 者 也 可 
以 使 用 我 们 示例 代码 中 的 接口 。 


列表 对 于 移动 应 用 开发 来 说 是 极其 实用 的 ， 并 且 你 会 发 现 许 多 应 用 的 图 形 界 面 把 列表 当 作 
中 心 元 素来 呈现 。<Listview> 其 实 就 是 一 系列 视图 的 集合 ， 通 过 它 可 以 选择 性 地 添加 一 些 
特殊 视图 ， 如 分 隔 符 、 头 部 和 尾部 。 可 以 参考 Dropbox、Twitter 和 iOS 设置 的 交互 模式 
( 4-6) [3 













































































<ListView> 是 React Native 发 挥 其 长 处 的 一 个 很 好 的 例子 ， 因 为 它 可 以 很 好 地 利用 其 宿主 
平台 。 在 移动 设备 上 ， 原 生 的 <ListView> 元 素 通 常 都 是 被 高 度 优化 的 ， 因 此 泻 染 可 以 流畅 
无 卡 顿 。 如 果 你 打算 在 <Listview> 中 泻 染 大 量 的 列表 项 ， 最 好 保证 子 视图 相对 简洁 ， 来 党 
试 减少 卡 顿 。 
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Bestsellers in Hardcover Fiction 


Stephen King 
FINDERS KEEPERS 





Paula Hawkins 
THE GIRL ON THE TRAIN 









E Anthony Doerr 
ALL THE LIGHT WE CANNOT SEE 


J 

| Judy Blume 
~ In the IN THE UNLIKELY EVENT 
Unlikelu 








图 4-5: 我 们 将 要 开发 的 图 书 列表 应 用 
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4-6: 列表 在 Dropbox、Twitter 和 iOS 设置 中 的 使 用 


React Native 中 的 <Listview> 组 件 至 少 需要 两 个 属性 : dataSource 和 renderRow。 
dataSource 顾名思义 ， 是 需要 被 深 桨 的 源 数据 信息 。renderRow 需要 基于 dataSource ( 数 
据 源 ) 中 的 元 素来 返回 一 个 组 件 。 


基础 的 用 法 在 SimpleListjs. 文件 中 有 说 明 。 我 们 将 从 为 <simpleList> 组 件 添 加 dataSource 
es 一 个 列表 的 ListView.DataSource 的 数据 源 需 要 实现 rowHasChanged 方法 。 这 里 
个 简单 的 例子 








I 





var ds = new ListView.DataSource({rowHasChanged: (r1，r2) => r1 !== r2}); 


为 了 设置 datasource 的 实际 内 容 ， 我 们 使 用 clonewithRows 方 法 。 让 我 们 在 
getInitialState 方法 中 返回 dataSource: 





getInitialState: function() { 


var ds = new ListView.DataSource({rowHasChanged: (r1，r2) => r1 !== r2}); 
return { 
dataSource: ds.cloneWithRows(['a', 'b', 'c', 'a longer example', 'd', 'e']) 





男 一 个 需要 的 属性 是 renderRow， 它 需要 基于 每 一 行 的 数据 来 返回 一 些 JSX: 


_renderRow: function(rowData) { 
return <Text style={styles.row}>{rowData}</Text>; 
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现在 可 以 将 它们 整合 为 一 个 简单 的 <Listview>， 通 过 泻 染 <Listview> 为 : 





<ListView 
dataSource={this. state.dataSource} 
renderRow={this._renderRow} 


/> 


运行 结果 如 图 4-7 所 示 。 








Carrier 全 8:30 PM [ 


a longer example 








4-7: SimpleList 组 件 泻 染 了 一 个 <ListView> 的 骨架 





如 果 继 续 开 发 ， 要 做 些 什么 呢 ? 我 们 来 创建 一 个 带 有 更 复杂 数据 的 <Listview> 组 件 。 我 们 
使 用 纽约 时 报 的 接口 来 开发 一 个 展现 《纽约 时 报 》 畅 销 图 书 列表 的 简单 应 用 。 


首先 ， 将 数据 初始 化 为 空 ， 因 为 要 从 远程 获取 数据 : 
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getInitialState: function() { 


var ds = new ListView.DataSource({rowHasChanged: (r1，r2) => r1 !== r2}); 
return { 

dataSource: ds.cloneWithRows([]) 
}; 


} 


紧 接着 ,创建 一 个 获取 数据 的 方法 ， 并 在 取得 数据 之 后 更 新 数据 源 。 这 个 方法 会 在 
componentDidMount 里 被 调用 : 





_refreshData: function() { 
var endpoint = 
'http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?response-format 
=json&api-key=' + API_KEY; 
fetch(endpoint) 
.then((response) => response.json()) 
.then((rjson) => { 
this.setState({ 
dataSource: this.state.dataSource.cloneWithRows(rjson.results.books) 
]); 
]); 
} 


每 一 本 由 纽约 时 报 接口 返回 的 图 书 数 据 都 有 三 个 属性 : coverURL、author 和 title ( 封 下 
片 地 址 、 作 者 和 标题 ) 。 我 们 更 新 <ListView> 的 render 方法 ， 让 它 基于 这 些 属 性 返回 组 件 
( 例 4-8)。 








狠 






































例 4-8: 对 于 _renderRow， 我 们 只 向 <BookItem> 传人 相关 的 数据 


_renderRow: function(rowData) { 
return <BookItem coverURL={rowData.book_image} 
title={rowData.title} 
author={rowData.author}/>; 


J 
我 们 再 添加 头 部 和 尾部 组 件 ， 例 4-9 解释 了 这 部 分 是 如 何 工作 的 。 注 意 ，<ListView> 的 头 
部 和 尾部 不 是 固定 不 动 的 ， 它 们 也 会 跟随 列表 一 起 滚动 。 如 果 你 需要 一 个 固定 不 动 的 头 部 
和 尾部 ， 最 简单 的 办 法 就 是 在 <ListView> 组 件 之 外 单独 泻 染 。 


























例 4-9: 为 BookListV2.js 中 泻 染 头 部 和 尾部 添加 相应 的 方法 
_renderHeader: function() { 
return (<View style={styles.sectionDivider}> 
<Text style={styles.headingText}> 
Bestsellers in Hardcover Fiction 
</Text> 
</View>); 


}， 


_renderFooter: function() { 
return( 
<View style={styles.sectionDivider}> 
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<Text> 
Data from the New York Times Best Seller list. 
</Text> 
</View> 
); 
5 








总 体 来 说 ， 畅 销 图 书 应 用 包括 两 个 文件 : BookListV2.js 和 BookItem.js， 其 中 BookListV2.js 
如 例 4-10 所 示 。(BookListjs 则 是 一 个 更 简单 的 版 本 ， 省 略 了 远程 获取 数据 的 功能 ， 它 也 














在 GitHub 仓库 上 ， 可 以 作为 参考 。) 





例 4-10: Bestsellers/BookListV2.js 


"Use strict'; 


var React = require('react-native'); 
var { 

StyleSheet, 

Text， 

View， 

Image， 

ListView, 
} = React; 


var BookItem = require('./BookItem'); 


var API_KEY = '73b19491b83909c7e07016f4bb4644f9:2:60667290 ' ; 


var QUERY_TYPE = 'hardcover-fiction’'; 
Var API_STEM 


'http://api.nytimes.com/svc/books/v3/lists' 


var ENDPOINT = * S${API_STEM}/S${QUERY_TYPE}?response-format=json&api-key=${API_KEY}; 


var BookList = React.createClass({ 
getInitialState: function() { 


var ds = new ListView.DataSource({rowHasChanged: (r1，r2) => r1 !== r2}); 


return { 
dataSource: ds.cloneWithRows([]) 
}; 
}， 


componentDidMount: function() { 
this._refreshData(); 
}， 


_renderRow: function(rowData) { 
return <BookItem coverURL={rowData.book_image} 
title={rowData.title} 
author={rowData.author}/>; 


}, 


_renderHeader: function() { 
return (<View style={styles.sectionDivider}> 
<Text style={styles.headingText}> 
Bestsellers in Hardcover Fiction 
</Text> 
</View>); 
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}， 


_renderFooter: function() { 
return( 
<View style={styles.sectionDivider}> 
<Text>Data from the New York Times Best Seller list.</Text> 
</View>); 


}, 


_refreshData: function() { 
fetch(ENDPOINT) 
.then((response) => response.json()) 
.then((rjson) => { 
this.setState({ 
dataSource: this.state.dataSource.cloneWithRows(rjson.results.books) 
}); 
]); 
}， 


render: function() { 
return ( 
<ListView 

style= 

dataSource={this. state.dataSource} 
renderRow={this._renderRow} 
renderHeader={this._renderHeader} 
renderFooter={this._renderFooter} 


/> 


Fs 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#FFFFFF', 
paddingTop: 24 


flex: 1， 
flexDirection: 
了 
listContent: { 
flex: 1， 
flexDirection: 'column' 


row 


flex: 1， 

fontSize: 24， 

padding: 42， 
borderWidth: 1， 
borderColor: “#DDDDDD 





64 | 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





sectionDivider: { 
padding: 8， 


backgroundColor: '#EEEEEE', 


alignItems: 'center' 
} 
headingText: { 
flex: 1， 
fontSize: 24， 
alignSelf: 'center' 
} 
13 


module.exports = BookList; 





<BookItem> 是 一 个 简单 的 组 件 ， 用 来 泻 染 列表 中 的 每 一 个 子 视图 ( 例 4-11)。 








例 4-11: Bestsellers/BookItem.js 


"Use strict'; 


var React = require('react-native'); 


var { 
StyleSheet, 
Text, 
View, 
Image， 
ListView, 

} = React; 


var styles = StyleSheet.create({ 


bookItem: { 
flex: 1， 
flexDirection: 'row', 


backgroundColor: '#FFFFFF', 
borderBottomColor: '#AAAAAA', 


borderBottomWidth: 2， 
padding: 5 


flex: 1， 
height: 150, 
resizeMode: 'contain’' 


alignItems: 'flex-end', 
flexDirection: 'column', 


alignSelf: 'center', 


padding: 20 
}， 
author: { 
fontSize: 18 
}， 
title: { 
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fontSize: 18, 
fontWeight: 'bold' 
} 
})3 


var BookItem = React.createClass({ 
propTypes: { 
CoverURL: React.PropTypes.string.isRequired, 
author: React.PropTypes.string.isRequired, 
title: React.PropTypes.string.isRequired 


}, 


render: function() { 
return ( 
<View style={styles.bookItem}> 
<Image style={styles.cover} source=/> 
<View style={styles.info}> 
<Text style={styles.author}>{this.props.author}</Text> 
<Text style={styles.title}>{this.props.title}</Text> 


module.exports = BookItem; 











如 果 要 展现 很 复杂 的 数据 ， 或 者 很 长 的 列表 ， 你 可 能 需要 关注 由 <ListView> 提供 的 一 些 可 
选 的 更 复杂 的 属性 来 对 它 进行 性 能 优化 。 当 然 ， 对 于 大 多 数 用 户 而 言 ， 以 上 的 用 法 已 经 足 
够 了 。 





4.3.2 ”使 用 Navigator 

<ListView> 是 一 个 整合 多 视图 以 提供 便利 交互 方式 的 很 好 的 例子 。 在 此 基础 上 更 进一步 ， 
我 们 还 可 以 使 用 像 <Navigator> 这 样 的 组 件 来 展示 应 用 的 多 个 屏幕 的 内 容 ， 就 像 网 站 的 多 
个 页 面 一 样 。 








<Navigator> 是 一 个 难以 捉摸 但 非常 重要 的 组 件 ， 并 且 在 许多 通用 型 应 用 里 被 广泛 使 用 。 
例如 ，iOS 设置 中 心 就 是 结合 了 <Navigator> 和 多 个 <Listview> 组 件 的 产物 (图 4-8)。 
Dropbox 应 用 也 使 用 了 Navigator。 
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4-8: iOS 设置 中 心 是 Navigator 行为 的 范例 


<Navigator> 允许 你 的 应 用 在 不 同 屏幕 之 间 切 换 (通常 叫 作 “场景 ")。 它 维护 了 一 个 “ 栈 ” 
路 由 ， 因 此 可 以 推 入 (push)、 弹 出 (pop) 和 替换 (replace) 场景 。 你 可 以 将 其 类 比 为 浏 
览 器 的 history 接口 。 一 个 “路 由 ”就 是 场景 的 名 称 和 索引 。 





举例 而 言 ， 在 iOS 设置 中 心 ， 栈 初始 为 空 。 当 你 选择 一 个 子 菜单 之 后 ， 初 始 场景 被 推 人 栈 
中 ， 点 击 左上 角 的 “返回 ”按钮 ， 场 景 5 就 被 弹出 了 。 














如 果 你 对 这 个 组 件 感 兴趣 ，UIExplorer 应 用 有 很 好 的 例子 ， 教 你 使 用 各 种 Navigator 的 接口 。 











注意 ， 实 际 上 有 两 个 Navigator 可 供 选 择 : 跨 平 台 <Navigator> 组 件 和 <NavigatorI0OS> 组 
件 。 本 书 中 ， 我 们 选择 使 用 <Navigator>。 








我 应 该 使 用 NavigatorlOS 吗 ? 


这 真是 个 好 问题 | React Native 文档 中 有 相同 的 问题 (http://facebook.github.io/react- 
native/docs/navigator-comparison.html)。 简单 来 说 就 是 ， 你 应 该 使 用 <Navigator>。 
<NavigatorI0S> 不 被 核心 团队 支持 ， 因 此 存在 一 些 bug。 


具体 来 说 ，<Navigator> 是 使 用 JavaScript 重新 实现 的 Android 和 iOS 的 Navigator 组 
件 。 从 这 点 上 来 说 ， 它 是 完全 跨 平台 且 足 够 灵活 的 。iOS 平台 的 <NavigatorI0S> 封装 
了 UIKit， 因 此 获得 了 Apple 的 行为 和 动画 ， 但 是 它 的 接口 有 一 些 限制 ， 因 为 不 是 核 
心 团队 优先 支持 的 ， 所 以 你 应 该 不 会 想 要 使 用 它 。 
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4.3.3 ”其 他 结构 化 组 件 


React Native 中 还 有 许多 结构 化 的 组 件 。 例 如 ， 实 用 的 <TabBarI0S> 和 <SegmentedControLIOS> 
组 件 (图 49)， 以 及 <DrawerLayoutAndroid> 和 <ToolbarAndroid> 组 件 等 (图 4-10) 。 


























你 会 发 现 这 些 组 件 都 是 以 特定 平台 的 名 称 为 后 缀 命名 的 。 这 是 因为 它们 为 特定 平台 的 UI 
元 素 封装 了 原生 接口 。 
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图 4-9: iOS 的 segmented 控制 (上 ) 和 tab 组 件 (下 ) 
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图 4-10: Android 的 toolbar ( 左 ) 和 drawer 组 件 ( 右 ) 
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这 些 组 件 对 于 组 织 应 用 的 多 个 界面 来 说 是 非常 实用 的 。 例 如 ，<TabBarI0S> 和 
<DrawerLayoutAndroid> 组 件 为 你 在 模式 和 方法 之 间 的 切换 提供 了 一 种 简便 的 方法 。 
<SegmentedControlI0S> 和 <ToolbarAndroid> 适合 用 来 做 细 粒 度 的 控制 。 














推荐 你 参考 特定 平台 的 设计 规范 来 更 好 地 使 用 这 些 组 件 : 


。 Android 设计 指南 (https://developer.android.com/design/index.html) 
。 iOS 人 机 界面 指责 (https://developer.apple.com/library/ios/documentation/UserExperience/ 
Conceptual/MobileHIG/) 














对 了 ， 等 等 ! 我 们 应 该 怎样 使 用 平台 特定 的 组 件 呢 ? 我 们 先 来 看 看 怎样 在 跨 平台 应 用 中 使 
用 平台 特定 的 组 件 。 


一人 
4.4 平台 特定 组 件 
不 是 所 有 的 组 件 都 能 在 任何 平台 间 通 用 的 ， 同样 ， 也 不 是 所 有 的 交互 方式 都 适用 于 任何 设 
备 。 但 这 并 不 意味 着 你 不 能 在 应 用 中 使 用 平台 特定 的 代码 ! 在 这 一 节 中 ， 我 们 将 学 习 平台 
特定 的 组 件 ， 以 及 如 何在 跨 平台 应 用 上 合并 它们 。 











在 React Native 中 编写 跨 平 台 代 码 并 不 是 一 个 孤注一掷 的 做 法 ! 你 可 以 在 应 
用 中 混合 跨 平台 代码 和 平台 特定 的 代码 ， 正 如 我 们 在 这 一 节 中 的 做 法 一 样 。 








4.4.1 iOS 或 Android 特 定 组 件 


有 些 组 件 只 能 在 特定 的 平台 上 使 用 。 包 括 <TabBarI0S> 和 <SwitchAndroid> 在 内 的 这 些 组 
件 ， 它 们 通常 是 平台 特有 的 ， 因 为 它们 封装 了 一 些 平台 特定 的 接口 。 对 于 一 些 组 件 来 说 ， 
拥有 平台 无 关 的 版 本 没有 任何 意义 。 例 如 ，<ToolbarAndroid> 组 件 暴露 了 Android 特有 的 
接口 ， 作 用 于 一 个 iOS 平台 不 支持 的 视图 类 型 上 。 




















平台 特定 的 组 件 通常 使 用 合适 的 后 绥 来 命名 : I0S 或 Android。 如 果 你 尝试 在 错误 的 平台 引 
入 组 件 ， 应 用 将 会 月 神 。 
组 件 也 可 以 拥有 平台 特定 的 属性 ， 这 些 都 在 文档 中 有 专门 的 标注 ， 还 有 它们 的 用 法 。 例 


如 ，<TextInput> 组 件 有 一 些 平台 无 关 的 属性 ， 也 有 一 些 限 制 只 能 在 iOS 或 Android 平台 使 
用 (图 4-11)。 
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ios maxLength number 


Limits the maximum number of characters that can be entered. Use this instead of 


implementing the logic in JS to avoid flicker. 


android numberOfLines number 


Sets the number of lines for a Textlnput. Use it with multiline set to true to be able to fill 


the lines. 











4-11: <TextInput> 有 Android 和 iOS 特定 的 属性 


4.4.2 平台 特定 版 本 的 组 件 

















既然 如 此 ， 应 该 怎样 在 跨 平台 应 用 中 处 理 平台 特定 的 组 件 或 属性 呢 ? 好 消息 是 ， 你 可 以 继 








I 





续 使 用 这 些 组 从 
可 以 使 用 这 个 命名 规范 针对 Android 或 iOS 进行 不 同 的 实现 。 


。 还 记得 我 们 有 index.ios.js 和 index.android.js 这 两 个 文件 吗 ? 任何 文件 都 


举 个 例子 ， 我 们 可 以 使 用 <SwitchI0S> 和 <SwitchAndroid> 组 件 。 它 们 暴露 了 略微 不 同 的 接 





口 ， 但 如 果 只 想 要 一 个 简单 的 切换 组 件 呢 ?” 那 么 就 可 以 创建 一 个 包装 组 们 





根据 平台 演 染 相应 的 组 件 。 


FE <Swtich>， 让 它 





我 们 将 从 实现 switch.iosjs( 例 4-12) 开始 讲 起 。 这 是 一 个 简单 的 <switchI05> 组件 的 包 


装 ， 当 切换 组 件 被 触发 时 会 调用 我 们 传人 的 回调 函数 。 





例 4-12: Switch.ios.js 


var React = require('react-native'); 
var { SwitchI0S } = React; 


var Switch = React.createClass({ 
getInitialState() { 
return {value: false}; 


}, 


_onValueChange(value) { 
this.setState({value: value}); 
if (this.props.onValueChange) { 
this.props.onValueChange(value); 
} 
}, 


render() { 
return ( 
<SwitchI0S 
onValueChange={this._onValueChange} 








| 大 


70 第 4 章 


图 灵 社 区 会 员 liw(447917757@qq.com) 专 享 尊 





value={this. state.value}/> 
); 
} 
}); 


module.exports = Switch; 
接 下 来 ， 我 们 一 起 来 实现 switch.android.js ( 例 4-13)。 


例 4-13: Switch.android.js 


var React = require('react-native'); 
var { SwitchAndroid } = React; 


var Switch = React.createClass({ 
getInitialState() { 
return {value: false}; 


}, 


_onValueChange(value) { 
this.setState({value: value}); 
if (this.props.onValueChange) { 
this.props.onValueChange(value); 
} 
二 


render() { 
return ( 
<SwitchAndroid 
onValueChange={this._onValueChange} 
value={this. state.value}/> 
); 
} 
]); 


module.exports = Switch; 


我 们 注意 到 ， 它 看 起 来 跟 switch.ios.js 基本 上 是 一 样 的 ， 并 且 它 也 实现 了 相同 的 接口 。 唯 
一 的 区 别 在 于 它 在 内 部 使 用 了 <SwitchAndroid>， 而 不 是 <SwitchI0S>。 



































现在 可 以 用 下 面 的 语句 从 文件 中 导入 <Switch> 组 件 : 
var Switch = require('./switch'); 


var switchComp = <Switch onValueChange={(val) => {console.log(val); }}/>; 





接 下 来 真正 开始 使 用 <switch> 组 件 。 创 建 一 个 新 的 文件 CrossPlatform.js， 其 中 包含 例 4-14 
中 的 代码 。 我 们 会 实现 一 个 基于 <switch> 的 数值 来 改变 背景 颜色 的 功能 。 


例 4-14: CrossPlatform.js 使 用 了 <Switch> 组 件 


var React = require('react-native'); 
var { 
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StyleSheet, 
Text， 
View， 
} = React; 
var Switch = require('./switch'); 
var CrossPLatform = React.createClass({ 
getInitialState() { 
return {val: false}; 


}, 


_onValueChange(val) { 
this.setState({val: val}); 


}, 


render: function() { 
var colorClass = this.state.val ? styles.blueContainer : styles.redContainer; 
return ( 
<View style={[styles.container, colorClass]}> 
<Text style={styles.welcome}> 
Make me blue! 


</Text> 
<Switch onValueChange={this._onValueChange}/> 
</View> 
); 
二 
所 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
aLignItems: 'center', 
}, 
blueContainer: { 
backgroundColor: '#5555FF'" 
}， 
redContainer: { 
backgroundColor: “#FF59555 
}， 
welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
} 
]); 


module.exports = CrossPLatform; 




















你 会 发 现 其 中 switch.js 文件 并 不 存在 ， 但 是 可 以 调用 require(./switch)。React 包 管 理 器 
将 会 自动 基于 平台 选择 正确 的 实现 ， 恰 当地 使 用 switch.ios.js 或 switch.android.js 文件 。 








最 后 ， 替 换 index.android.js 和 index.ios.js 文件 的 内 容 ， 让 它 浑 染 <CrossPLatform> 这 个 组 件 
( 例 4-15)。 
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例 4-15: index.ios.js 和 index.android.js 文件 应 该 对 等 ， 并 简单 地 导入 crossplatform.js 文件 


var React = require('react-native'); 
var { AppRegistry } = React; 


var CrossPLatform = require('./crossplatform'); 


AppRegistry.registerComponent('PlatformSpecific', () => CrossPLatform) ; 


现在 ， 可 以 同时 在 10S 和 Android 平台 运行 应 用 了 ( 


图 4-12)。 








5554:galaxy 











图 4-12: CrossPlatform 应 用 同时 在 iOS 和 Android 上 泻 染 相应 的 <Switch> 组 件 





移动 应 用 组 件 | 73 


图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





4.4.3 何 时 使 用 平台 特定 组 件 
那么 ， 什 么 时 候 使 用 平台 特定 组 件 才 合适 呢 ? 在 多 数 情 况 下 ， 当 你 的 应 用 需要 支持 平台 特 
定 的 交互 方式 的 时 候 ， 你 就 应 该 使 用 它 。 当 然 ， 如 果 你 希望 自己 的 应 用 使 用 起 来 更 “ 原 
生 ” 的 话 ， 研 究 平台 的 界面 规范 是 很 有 必要 的 。 


























Apple 和 Google 都 为 各 自 的 平台 提供 了 人 机 界面 指南 ， 值 得 一 看 : 





。 iOS 人 机 界面 指南 (https:/developer.apple.conylibrary/ios/documentation/UserExperience/ 
Conceptual/MobileHIG/) 
。 Android 设计 参考 (https://developer.android.com/design/index.htm!l) 











通过 创建 平台 特定 版 本 的 组 件 ， 可 以 更 好 地 实现 代码 复 用 和 平台 定制 之 间 的 平衡 。 大 部 
分 情况 下 ， 为 了 同时 支持 iOS 和 Android 平台 ， 可 能 只 需要 用 到 少数 分 别 支 持 特定 平台 
的 组 件 。 








4.5 “小结 


在 本 章 中 ， 我 们 具体 而 深入 地 学 习 了 React Native 中 最 重要 的 一 些 组 件 。 我 们 讨论 了 如 
何 使 用 基础 的 低层 组 件 ， 例 如 <Text> 和 <Image>， 以 及 像 <Listview>、<Navigator> 和 
<TabBarI0S> 这 样 更 高 级 的 组 件 。 同 时 ， 我 们 也 学 习 了 如 何 使 用 不 同 的 触摸 接口 和 组 件 ， 
开发 定制 的 触 模 处 理 函 数 。 最 后 ， 我 们 在 实战 中 学 习 了 使 用 平台 特定 组 件 的 方法 。 


现在 ， 你 应 该 能 使 用 React Native 开发 一 些 有 基础 功能 的 应 用 了 ! 既然 你 已 经 了 解 了 本 章 
中 讨论 的 组 件 ， 你 会 发 现 基 于 这 些 组 件 或 结合 这 些 组 件 来 开发 自己 的 应 用 与 使 用 Web 环境 
的 React 是 非常 相似 的 。 




















当然 ， 能 开发 出 具有 基础 功能 的 应 用 仅仅 是 我 们 的 征程 的 一 部 分 。 在 下 一 章 中 ， 我 们 将 重 
点 了 解 样式 相关 的 内 容 ， 以 及 如 何 使 用 React Native 的 样式 来 达到 想 要 的 感 观 体验 效果 。 
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第 5 章 


样式 





能 实现 具体 功能 的 应 用 固然 是 很 不 错 的 ， 但 如 果 你 不 懂得 如 何 为 它 添 加 样式 ， 那 么 可 能 
会 有 很 大 的 进展 ! 在 第 3 章 中 ， 我 们 使 用 基础 样式 构建 了 一 个 天 气 应 用 。 虽 然 它 让 我 们 
对 React Native 组 件 的 样式 有 了 一 些 大 概 的 了 解 ， 但 其 中 忽略 了 很 多 细节 。 本 章 中 我 们 会 
更 深入 地 学 习 React Native 样式 的 用 法 ， 包 括 如 何 创建 和 管理 样式 表 。 当 然 ， 还 有 React 
Native 实现 CSS 规则 的 细节 。 在 学 习 之 后 ， 你 应 该 可 以 轻松 自如 地 为 React Native 组 件 或 
应 用 添加 样式 了 。 





























如 果 想 在 React Native 和 Web 应 用 之 间 共 享 样式 ，GitHub 上 的 这 个 React Style 项 目 (https:// 
github.com/js-next/react-style) 提供 了 一 种 在 Web 上 使 用 React Native 样式 的 解决 方案 。 


5.1 声明 和 操作 样式 


当 使 用 Web 环境 的 React 时 ， 我 们 通常 使 用 分 离 的 样式 表 文 件 ， 它 们 可 能 使 用 CSS、 
SASS 或 LESS 编写 。 但 React Native 采用 了 一 种 完全 不 同 的 方式 ， 它 将 样式 完全 带 入 了 
JavaScript 的 世界 ， 强 制 你 显 式 地 链接 样式 和 组 件 。 竹 良 置 疑 ， 这 种 方式 引起 了 巨大 的 反 
响 ， 因 为 它 彻底 迫 弃 了 基于 CSS 的 样式 规范 。 


为 了 理解 React Native 样式 的 设计 思想 ,首先 需要 性 虑 一 些 传统 CSS 样式 表 的 痛 点 。 传统 
CSS 存在 许多 问题 ， 所 有 的 CSS 规则 和 类 名 都 在 全 局 作用 域 里 ， 如 果 不 注意 ， 一 个 组 件 样 
式 很 容易 会 影响 到 其 他 组 件 。 例 如 ，3 引 入 Twitter 公司 很 流行 的 Bootstrap 类 库 的 同时 也 会 












































注 1: Christopher Chedeau, aka Vjeux 的 “CSS in JS” 幻 灯 片 提供 了 一 个 很 好 的 概览 (https://speakerdeck. 


comy/vjeux/react-css-in-js ) 。 
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引进 600 个 新 的 全 局 变量 。 由 于 CSS 并 非 显 式 地 链接 HTML 元 素 ， 因 此 想 消 除 无 用 的 代 
码 将 会 变 得 很 困难 ， 并 且 不 容易 确定 哪 种 样式 将 会 被 应 用 到 指定 元 素 上 。 


像 SASS 和 LESS 这 样 的 语言 尝试 替代 CSS 不 尽 如 人 意 的 部 分 ， 但 许多 类 似 的 基本 问题 仍 
然 存 在 。 使 用 React 让 我 们 有 机 会 保留 CSS 可 取 的 部 分 ， 也 可 以 避免 一 些 有 歧义 的 部 分 。 
React Native 实现 了 CSS 可 用 样式 的 一 个 子 集 ， 在 不 损失 高 度 表 达能 力 的 前 提 下 能 够 保持 
样式 接口 的 简洁 性 。 然 而 ，position 属性 是 完全 不 同 的 ， 我 们 在 本 章 后 续 会 学 习 到 。 并 
且 ，React Native 不 支持 伪 类 、 动 画 或 选择 器 。 文 档 中 可 以 查看 支持 的 属性 列表 (https:/ 


facebook.github.io/react-native/docs/view.html#style ) 。 





























React Native 采用 基于 JavaScript 的 样式 对 象 来 代替 传统 样式 表 。 它 强制 JavaScript 代码 和 
组 件 保持 模块 化 ， 这 也 是 React Native 的 巨大 优势 之 一 。 通 过 把 样式 引入 到 JavaScript 领 
域 ，React Native 让 我 们 也 可 以 编写 模块 化 的 样式 。 


在 这 一 市 中 ， 我 们 将 会 学 习 如 何在 React Native 中 创建 并 操作 样式 对 象 。 


5.1.1 内 联 样 式 

从 语法 上 来 看 ， 内 联 样式 是 React Native 中 编写 组 件 样式 最 简单 的 一 种 方法 ， 虽 然 它们 通 
常 并 不 是 最 佳 方式 。 正 如 例 5-1 所 示 ，React Native 中 内 联 样式 的 语法 和 浏览 器 上 的 React 
是 一 样 的 。 


例 5-1: 使 用 内 联 样式 
<Text> 
The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox 
jumped over the Lazy <Text style={{fontWeight: "bold"}}>dog</Text>. 
</Text> 




















内 联 样式 有 一 些 优势 ， 它 们 简单 粗暴 ， 让 你 可 以 快速 地 调试 。 





但 是 由 于 它们 比较 低 效 ， 一 般 情况 下 应 该 避免 使 用 。 内 联 样式 对 象 会 在 每 一 个 浑 染 周期 都 
被 重新 创建 。 即 使 你 想 根 据 props 或 state 对 样式 作 修改 ， 也 不 一 定 需要 使 用 内 联 样式 ， 
我 们 马上 来 看 一 看 应 该 怎么 做 。 


5.1.2 ”对 象 样式 
如 果 你 看 过 内 联 样 式 的 语法 ， 会 发 现 可 以 给 style 属性 传 入 一 个 对 象 。 我 们 没有 必要 在 每 
一 次 调用 render 方法 时 都 重新 创建 样式 对 象 ， 所 以 可 以 把 它们 分 离 出 来 ， 如 例 5-2 所 示 。 


例 5-2: style 属性 接收 一 个 JavaScript 对 象 
var italic = { 

fontStyLe: 'italic' 

}; 
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var bold = { 
fontWeight: 'bold’ 


}; 
render() { 
return ( 
<Text> 
The quick <Text style={italic}>brown</Text> fox 
jumped over the Lazy <Text style={bold}>dog</Text>. 
</Text> 
); 
} 


由 Stylesheet.Create 提供 的 不 可 变性 很 多 时 候 次 大 于 利 ， 例 4-7 的 PanDemo.js 就 是 一 个 
很 好 的 例子 。 回 想 一 下 ， 我 们 需要 根据 触摸 运动 更 新 圆 形 的 位 置 ， 换 言 之 ， 每 一 次 我 们 从 
PanResponder 接收 到 更 新 的 数据 ， 都 需要 去 更 新 state 以 及 圆 形 的 样式 。 在 这 种 情况 下 ， 
根本 不 需要 不 可 变性 ， 至 少 控制 圆 形 位 置 的 样式 是 需要 改变 的 。 


因此 可 以 使 用 简单 对 象 来 储存 圆 形 的 样式 。 


























5.1.3 使 用 StyLesheet.Create 


你 会 发 现 大 多 数 的 React Native 示例 代码 都 使 用 了 Stylesheet.Create 方法 。Stylesheet. 
Create 方法 是 可 选 的 ， 但 一 般 都 会 使 用 它 。 文 档 (http://facebook.github.io/react-native/docs/ 
style.html) 是 这 么 描述 的 : 





Stylesheet.Create 方法 是 可 选 的 ， 但 有 一 些 重要 的 优势 。 它 保证 了 值 是 不 可 变 
的 ， 并 且 通 过 将 它们 转换 成 指向 内 部 表 的 纯 数字 ， 保 持 了 代码 的 不 透明 性 。 将 它 
们 放 在 文件 的 末尾 可 保证 它们 在 应 用 中 只 会 被 创建 一 次 ， 而 不 是 每 一 次 泻 染 周期 
都 被 重新 创建 。 








换言之 ，Stylesheet.Create 其 实 只 是 提供 保护 措施 的 语法 糖 。 绝 大 多 数 情 况 下 ， 
Stylesheet.Create 提供 的 不 可 变性 是 有 益 的 。 它 也 为 你 提供 了 通过 propTypes 校 验 属性 
的 能 力 : 通过 Stylesheet.Create 创建 的 样式 可 以 通过 View.propTypes.Style 和 Text. 
propTypes.Style 类 型 进行 校 验 。 


5.1.4 样式 拼接 

如 果 想 拼接 两 个 以 上 的 样式 ， 应 该 怎么 做 呢 ? 

先前 已 经 提 到 过 ， 相 比 于 样式 ， 我 们 更 喜欢 复 用 样式 组 件 。 这 是 正确 的 ， 但 有 时 候 可 能 
需要 复 用 样式 。 例 如 ， 有 一 个 按钮 (button) 样式 和 一 个 重点 文本 (accentText) 的 样式 ， 
你 可 能 想 结合 二 者 来 创建 一 个 重点 按钮 (AccentButton) 组 件 。 
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假设 你 的 样式 看 起 来 是 这 样 的 : 


var styles = Stylesheet.create({ 
button: { 
borderRadius: '8px', 
backgroundColor: '#99CCFF' 
}， 
accentText: { 
fontSize: 18, 
fontWweight: 'bold' 
} 
]); 


然后 通过 简单 地 拼接 样式 创建 了 一 个 拥有 两 种 样式 的 组 件 〈 例 5-3) 。 
例 5-3: style 属性 也 可 以 接收 一 个 对 象 数组 


var AccentButton = React.createCLass({ 
render: function() { 
return ( 
<Text style={[styles.button, styles.accentText]}> 
{this.props.children} 
</Text> 
); 











1 


正如 你 所 看 到 的 一 样 ，style 属性 可 以 接收 一 个 样式 对 象 数 组 。 如 果 愿 意 的 话 ， 也 可 以 在 
这 里 添加 内 联 样 式 ( 例 5-4) 。 


例 5-4: 可 以 混合 样式 对 象 与 内 联 样式 
var AccentButton = React.createClass({ 
render: function() { 
return ( 
<Text style={[styles.button, styles.accentText, {color: '#FFFFFF'}]}> 
{this.props.children} 
</Text> 
); 
} 
]); 


如 果 遇 到 冲突 ， 比 如 两 个 对 象 都 指定 了 相同 的 届 性 ，React Native 会 帮 有 我 们 解决 冲突 。 样 
式 数 组 中 最 右边 的 样式 有 最 高 优先 权 ， 并 且 空 值 (false、null 和 undefined) 的 


你 可 以 利用 这 个 特性 来 使 用 条 件 性 的 样式 ， 例 如 ， 我 们 有 一 个 <Button> 组 件 ， 和 希望 它 在 被 
触摸 的 时 候 添 加 额外 的 样式 ， 那 么 可 以 这 样 来 编写 代码 〈 例 5-5)。 
































例 5-5: 使 用 条 件 样式 


<View style={[styles.button, this.state.touching && styles.highlight]} /> 





这 种 方式 可 以 帮助 保持 渲染 逻辑 的 简洁 性 。 
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总 而 言 之 ， 样 式 拼接 是 结合 样式 的 一 种 实用 的 方法 。 对 比 一 下 Web 样式 的 做 法 ， 在 SASS 
中 我 们 采用 eextend 关键 字 ， 或 者 在 原生 CSS 中 对 类 进行 巾 套 和 重 写 。 样 式 拼接 是 一 种 更 
为 受 限 的 工具 ， 但 它 也 有 一 定 的 长 处 : 它 保持 了 逻辑 的 简洁 性 ， 并 且 更 容易 推导 出 元 素 使 
用 了 何 种 样式 以 及 如 何 使 用 的 。 


5.2 组织 和 继承 


目前 大 多 数 的 例子 中 都 是 将 样式 代码 放 在 主 JavaScript 文件 中 ， 并 通过 调用 Stylesheet. 
create 来 创建 的 。 对 于 示例 代码 ， 这 种 方法 是 可 行 的 ， 但 并 不 适用 于 实际 应 用 开发 。 那 么 
应 该 怎样 组 织 样式 呢 ? 在 这 一 闻 中 ， 我 们 将 一 起 来 学 习 组 织 样式 的 方法 以 及 如 何 共 享 和 继 


5.2.1 导出 样式 对 象 

随 着 样式 变 得 越 来 越 复杂 ， 你 将 会 郑 虑 把 它们 从 组 件 JavaScript 代码 中 分 离 出 来 。 一 种 常 
用 的 方法 是 通过 组 件 来 划分 目录 。 假 设 有 一 个 名 为 <ComponentName> 的 组 件 ， 你 可 以 创建 
一 个 名 为 ComponentName/ 的 目录 ， 它 的 结构 如 下 : 
































- ComponentName 
|- index.js 
|- styles.js 


随后 在 styles.js 文件 中 创建 并 导出 样式 表 ( 例 5-6)。 
例 5-6: 从 JavaScript 文件 中 导出 样式 


"use strict'; 





var React = require('react-native'); 
var { 

StyleSheet, 
} = React; 


var styles = Stylesheet.create({ 
text: { 
color: '#FFOQOFF', 
fontSize: 16 
}, 
bold: { 
fontWeight: 'bold' 
} 
]); 


module.exports = styles; 


在 index.js 中 ， 我 们 可 以 导入 样式 : 


让 
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var styles = require('./styles.js'); 
接着 ， 我 们 就 可 以 在 组 件 中 使 用 了 ( 例 5-7)。 
例 5-7: 从 外 部 JavaScript 文件 中 导入 样式 


"Use strict'; 


var React = require('react-native'); 
var styles = require('./styles.js'); 
var { 

View, 

Text， 

StyleSheet 
} = React; 


var ComponentName = React.createClass({ 
render: function() { 
return ( 
<Text style={[styles.text, styles.bold]}> 
Hello, world 
</Text> 
); 
} 
]); 


5.2.2 ”样式 作为 属性 传递 


你 可 以 把 样式 作为 属性 进行 传递 。View.propTypes.style 这 个 属性 类 型 确保 只 能 传递 有 效 
的 样式 给 属性 。 











你 可 以 用 这 个 方法 开发 出 可 扩展 的 组 件 ， 从 而 更 有 效 地 被 父 组 件 控制 流程 和 操作 样式 。 例 
如 ， 一 个 组 件 接收 一 个 可 选 的 样式 属性 〈 例 5-8)。 


例 5-8: 组 件 通过 属性 接收 样式 对 象 


"Use StrLet,, 

















var React = require('react-native'); 
var { 

View, 

Text 
} = React; 


var CustomizableText = React.createClass({ 
propTypes: { 
style: Text.propTypes.Style 
}， 
getDefauLtProps: function() { 
return { 
style: {} 
}; 
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render: function() { 
return ( 

<Text style={[myStyles.text, this.props.style]}> 
Hello, world 

</Text> 

); 
} 

]); 


通过 把 this.props.style 放置 在 样式 数组 的 末尾 ， 我 们 确保 可 以 重 写 默认 属性 。 


5.2.3 复 用 和 共享 样式 
通常 我 们 更 喜欢 复 用 有 样式 的 组 件 ， 而 不 是 复 用 样式 ， 但 确实 存在 一 些 情况 ， 使 得 我 们 需 
要 在 组 件 间 共享 样式 。 这 有 时候， 常用 的 办 法 是 把 项 目 大 概 组 织 成 下 面 这 样 ， 





- js 
| - components 
| - Button 
| - index.js 
| - styles.js 
| - styles 
| - styles.js 
| - colors.js 
| - fonts.js 











一 个 组 件 的 目录 应 该 包含 React 类 ， 以 及 任何 组 件 特定 的 文件 。 共 享 的 样式 应 该 放置 
在 组 件 目录 之 外 。 共 享 样式 可 以 包含 像 调 色 板 、 字 体 、 标 准 内 外 边 距 等 信息 。 














通过 划分 组 件 和 样式 到 不 同 的 目录 中 ， 你 可 以 基于 环境 更 清晰 地 保持 每 一 个 文件 的 预期 用 





styles/styles.js 包含 所 有 共享 的 样式 文件 ， 并 进行 了 统一 导出 。 然 后 你 的 组 件 可 以 导入 
styles.js 文件 ， 根 据 需 要 使 用 它们 。 或 者 ， 你 可 能 更 喜欢 直接 从 styles/ 目录 导入 特定 的 
样式 。 

由 于 现在 我 们 已 经 将 样式 移 到 了 JavaScript 中 ， 怎 样 组 织 样 式 也 成 为 了 项 目 代 码 结构 需要 
考虑 的 一 部 分 ， 但 是 这 里 没有 唯一 正确 的 方法 。 


5.3 ”定位 和 设计 布局 

React Native 的 样式 功能 使 用 中 最 大 的 一 个 改变 是 定位 。CSS 支持 多 种 定位 技术 ， 例 如 
float (浮动 )、 绝 对 定位 、 表 格 布局 和 块 级 布局 等 方法 ， 这 很 容易 使 人 迷惑 。React Native 
的 定位 方案 则 更 加 专注 ， 主 要 依赖 于 flexbox 和 绝对 定位 ， 结 合 一 些 诸如 margin 和 padding 
这 样 的 属性 。 在 这 一 节 中 ， 我 们 将 学 习 如 何在 React Native 中 设计 布局 ， 并 尝试 开发 一 个 
蒙 德里 安 画 风 (以 抽象 几何 图 案 为 特点 ) 的 布局 应 用 。 
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5.3.1 使 用 flexbox 布 局 


flexbox 是 一 个 CSS3 的 布局 模式 。 不 像 现 有 的 块 级 和 内 联 的 布局 方式 ，flexbox 给 予 我 们 一 








种 无 方向 的 设计 布局 的 方案 。( 是 的 ， 垂 直 居 中 终于 变 得 容 


























易 了 ! ) React Native 重度 依赖 


于 flexbox。 如 果 你 想 阅 读 完整 的 说 明 ， 可 以 从 MDN 文档 (https://developer.mozilla.org/en- 
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 开始 。 


在 React Native 中 ， 下 列 flexbox 属性 是 可 用 的 : 





。 flex 

。 flexDirection 
。 flexWrap 

。 alignSelf 


。 alignItems 


并 且 ， 这 些 相关 的 属性 也 会 影响 布局 : 





。 height 
。 width 

。 margin 
。 border 


。 padding 


如 果 你 曾经 在 Web 平台 使 用 过 flexbox， 那 么 这 里 不 会 有 太 多 的 惊喜 。flexbox 在 React 
Native 的 设计 布局 中 是 至 关 重 要 的 ， 所 以 这 里 我 们 将 花 一 些 时 间 来 探索 一 下 它 的 用 法 。 


flexbox 背后 主要 的 思想 是 创建 可 预见 结构 的 布局 ， 即 使 给 定 动态 尺寸 的 元 素 也 能 够 创 











用 的 功能 。 
我 们 从 父 元 素 <View> 和 一 些 子 元 素 开 始 : 


<View style={styles.parent}> 
<Text style={styles.child}> Child One </Text> 
<Text style={styles.child}> Child Two </Text> 
<Text style={styles.child}> Child Three </Text> 
</View> 


然后 ， 为 视图 添加 一 些 基础 的 样式 ， 但 尚未 涉及 定位 : 





var styles = StyleSheet.create({ 
parent: { 
backgroundColor: '#F5FCFF', 
borderColor: '#0099AA', 
borderwidth: 5， 





建 。 由 于 我 们 为 移动 设备 设计 布局 ， 需 要 适应 多 屏幕 尺寸 和 方向 ， 因 此 这 是 一 个 非常 实 
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marginTop: 30 
}， 
child: { 


borderColor: '#AAQ099', 


borderWidth: 2， 
textAlign: 'center', 
fontSize: 24, 
} 
二) 


最 终 的 布局 如 图 5-1 所 示 。 





Carrier 全 





8:51 AM 


Child One 


Child Two 
Child Three 








图 5-1: 添加 flex 属性 之 前 的 布局 情况 


接 下 来 ,分 别 为 父子 元 素 添加 flex 属性 。 通 过 添加 flex 属性 ， 我 们 明确 地 将 它 选 为 
flexbox 模式 。flex 需要 一 个 数字 ， 这 个 数字 决定 了 子 元 素 获得 相对 权重 的 大 小 。 把 它们 
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都 设置 为 1， 就 获得 了 相等 的 权重 。 


设置 flexDirection: 'column' ,使 得 组 件 纵 向 排列 。 如 果 设 置 fLexDirection: 'row'， 那 么 
子 元 素 就 会 横向 排列 。 改 变 的 样式 可 以 查看 例 5-9。 图 5-2 对 比 了 不 同 值 对 布局 的 影响 情况 。 


例 5-9: flex 和 flexDirection 属性 的 变化 


var styles = StyleSheet.create({ 

parent: { 
flex: 1， 
flexDirection: 'column', 
backgroundColor: '#F5FCFF', 
borderColor: '#0099AA', 
borderWidth: 5， 
marginTop: 30 


]， 

child: { 
flex: 1， 
borderColor: '#AAQ099', 
borderwidth: 2， 
textAlign: 'center', 
fontSize: 24, 

} 

上 
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Child One Child One| Child Twol Child 
Three 

Child Two 

Child Three 














5-2.; 设 置 基础 的 flex 和 flexDirection 属性 ;设置 flexDirection 属性 为 coLumn ( 左 ) 和 row ( 右 ) 
如 果 我 们 添加 了 aLignItems 属性 ， 那 么 子 元 素 将 不 再 自动 扩展 填充 水 平和 垂直 两 个 方向 上 
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， 的 空间 。 我 们 设置 了 flexDirection: “row' ， 因 此 会 自动 填充 行 。 然 而 现在 它们 只 会 
能 占据 垂直 方向 上 它们 所 需 的 空间 。 





并 且 ，alignItems 属性 决定 了 它们 在 交叉 轴 上 的 位 置 。 交 叉 轴 与 fLexDirection 正 交 ， 因 
此 它们 是 相互 垂直 的 。flLex-start 会 把 子 元 素 放置 在 顶部 ，center 将 其 居中 ，flex-end 则 
将 其 放置 在 底部 。 


让 我 们 一 起 来 看 看 添加 alignItems 属性 之 后 发 生 了 什么 吧 (结果 如 图 5-3 所 示 )。 















































var styles = StyleSheet.create({ 

parent: { 
flex: 1， 
flexDirection: 'row', 
alignItems: 'flex-start', 
backgroundColor: '#F5FCFF', 
borderColor: '#0099AA', 
borderWidth: 5， 
marginTop: 30 


flex: 1， 

borderColor: '#AAQ099', 
borderWidth: 2， 
textAlign: 'center', 
fontSize: 24, 
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图 5-3; 设置 alignItems 在 交叉 轴 上 定位 子 元 素 ， 交 叉 轴 与 fLexDirection 正 交 ; 这 里 分 别 设置 了 
flex-start、 center 和 flex-end 
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5.3.2 ”使 用 绝对 定位 


除了 flexbox，React Native 也 支持 绝对 定位 ， 其 工作 方式 基本 上 与 Web 上 的 一 致 ， 你 可 以 
通过 设置 position 属性 来 启用 绝对 定位 。 





position: absoLute 


接着 可 以 通过 Left、 
一 个 绝对 定位 的 子 元 素 的 4 


right、top 和 botton 这 些 熟 悉 的 属性 控制 组 件 的 定位 。 





用 flexbox， 然 后 在 子 元 素 上 使 用 绝对 定位 。 


但 是 此 处 仍然 有 一 些 限 制 ， 


复杂 。 一 般 来 说 ， 


绝对 定位 非常 实用 。 
位 就 十 分 容易 : 


container: { 
position: 
top: 30， 
Left: 0， 
right: 0， 
bottom: 0 





























举例 来 说 ， 如 果 你 想 在 状态 栏 





"absoLute ' ， 


5.3.3 学 以 致 用 


现在 尝试 使 用 定位 技术 来 创建 一 个 相对 复杂 的 布局 。 先 前 提 到 过 ， 我 们 要 模仿 蒙 德里 安 的 
画 风 。 图 5-4 是 最 终 的 布局 效果 。 











例如 我 们 没有 z-index 属性 ， 
一 组 视图 的 最 后 一 个 元 素 有 最 高 的 优先 级 。 


创建 一 











标 是 相对 于 父 元 素 的 位 置 而 存在 的 ， 因 此 你 可 以 在 父 元 素 上 使 


因此 定位 相互 层 受 视图 会 有 一 些 





到 ， 那 么 使 用 绝对 定 
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图 5-4: 使 用 flexbox 设计 布局 
我 们 应 该 怎样 做 才能 实现 这 样 的 布局 呢 ? 


首先 ， 创 建 一 个 parent 样式 作为 容器 。 我 们 将 会 在 父 元 素 上 使 用 绝对 定位 ， 因 为 这 是 最 合 
适 的 : 除了 屏幕 顶部 状态 栏 的 30 像素 的 偏 移 之 外 ， 我 们 希望 它 可 以 填充 所 有 的 空间 。 我 
们 同时 也 设置 flexDirection 为 coLumn : 





parent: { 
flexDirection: 'column', 
position: "absoLute ' ， 
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top: 30， 

Left: 0， 

right: 0， 

bottom: 0 
J 


再 看 看 这 张 图 ， 我 们 可 以 把 它 分 割 成 较 大 的 几 个 格子 。 这 些 分 割 都 是 任意 的 ， 因 此 选择 任 
意 一 种 方式 切割 即 可 。 图 5-5 展示 了 分 割 布局 的 一 种 方式 。 
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图 5-5: 添加 样式 的 顺序 
起 初 我 们 把 布局 切 分 成 顶部 和 底部 两 个 格子 : 
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<View style={styles.parent}> 
<View style={styles.topBlock}> 
</View> 
<View style={styles.bottomBlock}> 
</View> 

</View> 


然后 创建 下 一 层 ， 它 包含 一 个 “ 左 列 ” 和 “ 右 底 ”部 分 ， 以 及 样式 名 为 cellThree、cellFour 


TT 


和 cellFive 的 <View> 组 件 。 





<View style={styles.parent}> 
<View style={styles.topBlock}> 
<View style={styles.leftCol}> 
</View> 
<View style={[styles.cellThree, styles.base]} /> 
</View> 
<View style={styles.bottomBlock}> 
<View style={[styles.cellFour, styles.base]}/> 
<View style={[styles.cellFive, styles.base]}/> 
<View style={styles.bottomRight}> 
</View> 


例 5-10: Styles/Mondrian/index.js 


"use strict'; 


var React = require('react-native'); 
var { 
AppRegistry， 
StyLeSheet ， 
Text， 
View， 
} = React; 
var styles = require('./style'); 


var Mondrian = React.createClass({ 
render: function() { 
return ( 
<View style={styles.parent}> 
<View style={styles.topBlock}> 
<View style={styles.leftCol}> 
<View style={[styles.cellOne, styles.basel]} /> 
<View style={[styles.base, styles.cellTwo]} /> 
</View> 
<View style={[styles.cellThree, styles.basel]} /> 
</View> 
<View style={styles.bottomBlock}> 
<View style={[styles.cellFour, styles.base]}/> 
<View style={[styles.cellFive, styles.base]}/> 
<View style={styles.bottomRight}> 
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<View style={[styles.cellSix, styles.basel]} /> 

<View style={[styles.cellSeven, styles.base]} /> 

</View> 
</View> 


</View> 
); 
} 
}); 


module.exports = Mondrian; 





现在 添加 样式 ， 使 其 生效 ( 例 5-11)。 


例 5-11: Styles/Mondrian/style.js 


var React = require('react-native'); 
var { StyleSheet } = React; 


var styles = StyleSheet.create({ 


parent: { 


flexDirection: 'column', 


position: 

top: 30， 

left: 0， 

right: 0， 

bottom: 0 
}， 


base: { 


"absoLute ' ， 


borderColor: “'#000000 ' ， 
borderWidth: 5 


}， 
topBLock: { 


flexDirection: 'row', 


flex: 5 

和 

leftCol: { 
flex: 2 

}, 

bottomBLock : 
fLex: 2， 


flexDirection: 


}， 
bottomRight: 


{ 


row 


{ 


flexDirection: 'column', 


flex: 2 
}s 
cellone: { 

flex: 1， 


borderBottomWidth: 15 


} 
cellTwo: { 
flex: 3 


}, 


cellThree: { 
backgroundColor: '#FFO000', 
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fLex: 5 


}， 
cellFour: { 

flex: 3， 

backgroundColor: “#0000FF 


cellFive: { 
flex: 6 
}， 
cellSix: { 
flex: 1 
cellSeven: { 
flex: 1， 
backgroundColor: “#FFFF00， 


} 
的 


module.exports = styles; 


5.4 ”小结 


本 章 介绍 了 React Native 样式 的 使 用 方法 。 虽 然 大 部 分 原理 与 Web 环境 的 CSS 一 致 ， 但 
React Native 为 样式 引入 了 一 个 不 同 的 结构 和 使 用 方法 。 这 里 有 许多 新 的 内 容 需 要 消化 ! 
现在 ， 你 应 该 能 够 熟练 使 用 React Native 的 样式 功能 来 开发 你 想 要 的 移动 界面 了 。 最 妙 的 
是 ， 试 验 样 式 功能 非常 容易 ;模拟 器 上 “ 重 载 ” 的 功能 赋予 了 我 们 紧凑 的 反馈 回路 。( 在 
传统 的 移动 应 用 开发 中 ， 编 辑 样式 通常 都 需要 重新 构建 应 用 ， 这 很 不 值得 。) 



































如 有 果 你 想 做 更 多 样式 方面 的 练习 ， 可 以 回 到 前 面 的 畅销 图 书 应 用 或 天 气 应 用 ， 尝 试 调整 它 
们 的 样式 和 布局 。 后 面 的 章节 会 开发 更 多 示例 应 用 ， 你 也 将 得 到 更 多 素材 用 来 练习 。 
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第 6 章 


平台 接口 





当 你 开发 移动 应 用 时 ， 自 然 会 想到 使 用 宿主 平台 的 特定 接口 。React Native 使 开发 者 很 容 
易 就 能 使 用 诸如 摄像 头 、 地 理 定 位 和 持久 化 存储 这 样 的 接口 。React Native 通过 引入 模块 
的 方式 调用 这 些 平 台 接口 ， 并 为 我 们 提供 了 方便 的 异步 JavaScript 接口 来 调用 底层 的 功能 。 














React Native 默认 没有 封装 所 有 的 宿主 平台 接口 ， 一 些 平 台 接口 需要 你 自己 封装 或 者 使 用 
React Native 社区 封装 的 模块 。 第 7 章 将 会 介绍 这 部 分 的 内 容 。 官 方 文档 (https://facebook. 
github.io/react-native/docs/getting-started.html) 是 查看 接口 支持 情况 的 最 好 的 参考 。 











本 章 将 介绍 一 些 可 用 的 平台 接口 。 在 本 章 的 例子 中 ， 我 们 将 对 之 前 的 天 气 应 用 作 一 些 改 
动 ， 为 它 添加 地 理 定 位 的 功能 ， 使 得 应 用 可 以 自动 检测 用 户 的 位 置 。 此 外 我 们 还 将 添加 
“记忆 ”功能 ， 使 其 能 够 保存 先前 的 搜索 记录 。 最 后 ， 我 们 允许 用 户 自行 从 相册 选择 背景 
图 片 。 


本 章 中 每 一 市 都 会 展示 相应 的 代码 片段 ， 此 外 ， 该 应 用 完整 的 代码 包含 在 6.4 节 中 。 
































iOS 与 Android 兼容 性 


这 些 平台 接口 的 跨 平台 支持 工作 仍 在 进行 中 ， 例 如 Asyncstorage 同时 支持 
了 iOS 和 Android 平台 ,地 理 定位 ' 和 相册 目前 只 支持 iOS 平台 。 查 看 已 知 问 
题 列表 (https://facebook.github.io/react-native/docs/known-issues.html) 可 以 了 
解 哪些 模块 正 被 移植 到 Android 平台 。 

















i 


注 1: 目前 Android 也 支持 了 地 理 定位 接口 。 一 一 译 者 注 
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6.1 使 用 定位 接口 


对 于 移动 应 用 来 说 ， 获 取 用 户 的 定位 信息 是 非常 有 用 的 。 它 允许 你 根据 用 户 的 相关 信息 更 
好 地 为 用 户 提供 服务 。 地 理 定位 信息 也 在 大 量 应 用 中 被 广泛 使 用 。 


值得 庆幸 的 是 ，React Native 内 置 支持 定位 功能 。 这 是 一 个 平台 无 关 的 兼容 性 接口 。 它 
基于 MDN 的 Web 地 理 定位 接口 规范 (https://developer.mozilla.org/en-US/docs/Web/API/ 
Geolocation) 返回 数据 。 由 于 我 们 使 用 规范 的 定位 接口 ， 因 此 不 需要 操心 平台 相关 的 问题 ， 
比如 地 理 服务 以 及 编写 完全 兼容 的 位 置 感知 的 功能 。 















































地 理 定位 支持 iOS 与 Android 平台 








目前 React Native 的 地 理 定位 接口 已 经 同时 支持 了 iOS 和 Android 平台 ， 详 
细 信 息 可 以 查看 官方 文档 。 











6.1.1 获取 用 户 地 理 位 置 


使 用 地 理 定位 接口 获取 用 户 的 位 置信 息 轻 而 易 举 。 如 例 6-1 所 示 ， 我 们 需要 调用 


navigator .geolocation, 


例 6-1: 调用 navigator .geolocation 获取 用 户 位 置 
navigator .geolocation.getCurrentPosition( 

(position) => { 

console.log(position); 
}， 
(error) => {alert(error.message)}, 
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
); 


接口 遵循 了 标准 接口 的 规范 ， 因 此 我 们 不 需要 单独 导入 它 ， 非 常 容易 使 用 。 





getCurrentPosition 方法 需要 接收 三 个 参数 : 成 功 回调 国 数 、 失 败 回 调 国 数 以 及 一 系列 的 
可 选 参数 (geo0ptions) ， 其 中 成 功 回调 函数 是 必需 的 。 





传 和 成功 回调 函数 的 position 对 象 包含 了 坐标 信息 和 一 个 时 间 惟 。 例 6-2 展示 了 信息 的 格 
式 和 可 能 的 取 值 。 





例 6-2: 调用 getCurrentPosition 的 返回 值 格式 样本 


coords: { 
speed:-1, 
Longitude:-122.03031802 ， 
Latitude:37.33259551999998 ， 
acCuUracy:500， 
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heading:-1， 
altitude:0, 
altitudeAccuracy:-1 
}, 
timestamp:459780747046.605 
} 





geo0ptions 必须 是 一 个 对 象 ， 它 可 以 有 这 些 键 值 : timeout、enableHighAccuracy 和 














maximumAge。timeout 是 其 中 最 重要 的 参数 ， 因 为 它 可 能 会 影响 应 用 的 逻辑 。 


6.1.2 处理 权限 问题 


定位 的 数据 属于 敏感 信息 ， 因 此 默认 情况 下 没有 被 启用 。 你 的 应 用 应 该 能 够 处 理 


限 被 接受 或 被 拒绝 这 两 种 情况 。 





申请 此 权 


大 多 数 的 移动 应 用 平台 都 有 定位 权限 这 样 的 概念 。 比 如 在 iOS 平台 上 ， 用 户 可 以 选择 
完全 阻止 定位 服务 ， 或 者 逐一 管理 应 用 的 权限 。 如 果 用 户 拒绝 了 应 用 的 权限 申请 ， 那 么 




















getCurrentPosition 中 的 失败 回调 函数 将 会 被 调用 。 








需要 注意 的 是 ， 定 位 权限 本 质 上 随时 有 可 能 被 取消 ， 因 此 建议 应 用 程序 做 好 定位 服务 调用 





失败 的 相关 处 理 。 


应 用 程序 第 一 次 申请 定位 服务 时 ， 用 户 将 会 看 到 如 图 6-1 所 示 的 权限 对 话 框 。 





Allow “" WeatherProject” to 
access your location while 
you use the app? 


Dont Allow Allow 














图 6-1: 定位 请 求 
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当 对 话 框 处 于 激活 状态 时 ， 不 会 触发 回调 函数 。 一 旦 用 户 点 击 任意 一 个 选项 之 后 ， 对 应 的 


回调 函数 就 会 被 调用 。 设 置 会 被 保存 起 来 ， 因 此 用 户 下 一 次 不 需要 再 选择 。 

















假如 用 户 拒 绝 了 权限 申请 ， 如 果 愿 意 的 话 ， 你 可 以 不 作 任何 处 理 ， 但 是 大 多 数 应 用 通常 


重新 申请 一 次 权限 。 


6.1.3 ”在 iOS 模 拟 器 上 测试 定位 


2 
AR 


你 很 可 能 会 在 模拟 器 上 完成 大 部 分 的 开发 和 测试 工作 ,或 者 至 少 是 在 办 公 桌 上 完成 的 。 那 


么 怎样 才能 测试 不 同 的 位 置 呢 ? 











iOS 模拟 器 可 以 轻而易举 地 模拟 不 同 的 位 置 ， 默 认 情 况 下 会 定位 到 美国 加 利 福 尼 亚 州 附近 
的 Apple 公司 总 部 ， 但 是 通过 菜单 中 的 “Debug 一 Location 一 Custom Location...” 选 项 可 





以 指定 任何 其 他 的 坐标 (图 6-2)。 





多 iOSSimulator File Edit Hardware lp Window Help 
Slow Animations BT 





iOS Simulator ”Color Blended Layers 
Carrier 全 Color Copied Images 
Color Misaligned Images 
Color Offscreen-Rendered 












Open System Log... $8/ 
Trigger iCloud sync 仓 引 | 







Location None 
V Custom Location... 
ple 
City Bicycle Ride 
City Run 
Freeway Drive 

















图 6-2: 选择 一 个 位 置 
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通过 选择 不 同 的 位 置 进行 功能 测试 是 个 很 好 的 实践 方法 ， 当 然 出 于 严谨 考虑 ， 你 应 该 部 署 
到 真实 物理 设备 上 进行 测试 。 








6.1.4 监听 用 户 位 置 
你 也 可 以 监听 用 户 的 位 置 ， 每 当 位 置 变化 时 就 会 收 到 更 新 。 这 个 功能 可 以 用 来 长 期 记录 用 
户 的 位 置 ， 或 者 用 来 保证 应 用 接收 到 的 是 最 新 的 位 置信 息 : 

this.watchID = navigator .geoLocation.watchPosition((position) => { 


this.setState({position: position}); 


Ds 
注意 ， 你 也 可 以 在 组 件 被 卸载 时 清除 监听 器 : 





componentWillUnmount: function() { 
navigator .geolocation.clearWatch(this .watchID); 


} 


6.1.5 限制 

由 于 定位 接口 基于 MDN 规范 ， 因 此 它 失 去 了 一 些 更 高 级 的 基于 定位 的 功能 。 例 如 : iOS 
系统 提供 了 “地 理 围 栏 ”的 接口 ， 该 接口 会 在 用 户 进 入 指定 地 理 区 域 (地 理 围栏 ) 之 后 通 
知 应 用 。React Native 暂时 还 不 支持 这 个 接口 ， 这 意味 着 如 果 你 要 使 用 基于 定位 的 功能 的 
话 ， 需 要 自己 移植 接口 。 


























6.1.6 ”改进 天 气 应 用 
“智能 天 气 应 用 ”是 之 前 天 气 应 用 的 一 个 更 新 的 版 本 ,现在 它 利用 了 地 理 定位 接口 。 你 可 
以 在 图 6-3 中 看 到 这 些 变 化 。 
































最 值得 一 提 的 是 <LocationButton> 组 件 ， 它 获取 用 户 当前 的 位 置 并 在 点 击 之 后 触发 回调 函 
数 。<LocationButton> 的 代码 在 例 6-3 中 。 
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Carrier 倒 5:24 PM 了 面 国 ， 


Current weather for 


Use Current Location 


Clear 


Current conditions: Sky is Clear 


8 13°F 











图 6-3: 基于 用 户 当 前 位 置 显示 天 气 预 报 


例 6-3: SmarterWeather/LocationButton/index.js: 点 击 按钮 ， 获取 用 户 位 置 


var React = require('react-native'); 
var styles = require('./style.js'); 
var Button = require('./../Button'); 
var LocationButton = React.createClass({ 
propTypes: { 
onGetCoords: React.PropTypes.func.isRequired 


}, 
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_onPress: function() { 
navigator .geolocation.getCurrentPposition( 
(initialPosition) => { 
this.props.onGetCoords(initialpPosition.coords.latitude, 
initialPosition.coords.longitude); 
]， 
(error) => {alert(error.message)}, 
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
); 
}， 


render: function() { 
return ( 
<Button label="Use CurrentLocation" 
style={styles.locationButton} 
onpPress={fthis. onpPress}/> 
); 
} 
]); 


module.exports = LocationButton; 








LocationButton 使 用 的 按钮 组 件 代码 见于 本 章 结尾 ， 它 在 <TouchableHighlight> 中 简单 地 
封装 了 一 个 <Text> 组 件 ， 并 添加 了 一 些 基 础 的 样式 。 























同时 ， 我 们 也 要 更 新 weather_projectjs 主 文件 ， 使 其 支持 两 种 查询 方式 〈 例 6-4) 。 幸 运 的 
是 ，OpenWeatherMap 接口 同时 支持 基于 经 纬度 和 邮编 的 查询 方式 。 





例 6-4: 添加 _getForecastForCoords 和 _getForecastForZip 方法 


var WEATHER_API_KEY = 'bbeb34ebf60ad50f7893e7440ale2b0b'; 
var API_STEM = 'http://api.openweathermap.org/data/2.5/weather?'; 


_getForecastForZip: function(zip) { 
this. getForecast( 
“${API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}. ); 


}， 


_getForecastForCoords: function(lat, lon) { 
this. getForecast( 
“${API_STEM}Lat=${lat}&lon=${Llon}&units=imperial&APPID=${WEATHER_API_KEY} ); 


}， 


_getForecast: function(url, cb) { 
fetch(url) 
.then((response) => response.json()) 
.then((responseJSON) => { 
console.log(responseJSON); 
this.setState({ 
forecast: { 
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main: responseJSON.weather[0].main, 
description: responseJSON.weather[0].description, 
temp: responseJSON.main.temp 
} 
}); 
}) 
.Catch((error) => { 
console.warn(error); 
和 
} 


最 后 ， 我 们 在 主 视 图 导入 LocationButton 组 件 ， 将 _getForecastForCoords 作为 回调 函数 。 





<LocationButton onGetCoords={this. getForecastForCoords}/> 
这 里 省 略 了 样式 的 更 新 ， 因 为 应 用 完整 的 代码 已 经 附 在 本 章 结尾 。 


如 果 你 要 正式 上 线 给 用 户 使 用 ， 还 有 大 量 的 工作 需要 完成 。 例 如 ， 一 个 完整 的 应 用 应 该 有 
更 好 的 错误 提示 以 及 更 完善 的 界面 反馈 等 。 但 是 获取 定位 信息 这 样 基础 的 功能 确实 是 出 平 
意料 地 简单 ! 


6.2 ”使 用 用 户 图 片 与 摄像 头 


能 够 使 用 本 地 图 片 和 摄像 头 是 许多 移动 应 用 又 一 个 重要 的 功能 。 在 这 一 节 中 ， 我 们 将 探索 
如 何 与 用 户 图 片 数据 和 摄像 头 交互 。 


我 们 仍然 使 用 “智能 天 气 应 用 ”这 个 项 目 ， 让 它 可 以 读 取 用 户 本 地 的 图 片 作为 应 用 背景 。 


6.2.1 相机 模块 


React Native 提供 了 一 个 相机 的 接口 一 一 获取 用 户 设备 本 地 的 图 片 或 从 摄像 头 拍摄 照片 。 




















目前 仅 iOS 支持 相机 模块 


相机 模块 将 很 快 支持 Android 平台 ， 但 是 目前 仅 支持 iOS 平台 。 











与 相机 模块 交互 最 基础 的 用 法 并 不 是 太 复杂 。 首 先 我 们 需要 照常 导入 模块 。 


var React = require( 'react-native ' ) ; 
var { CameraRoLL } = React; 


然后 ， 我 们 使 用 该 模块 来 获取 用 户 图 片 相关 的 信息 ， 如 例 6-5 所 示 。 


例 6-5: CameraRoll.getPhotos 的 基础 用 法 
CameraRoLL.getPhotos( 
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{first: 1}, 

(data) => { 
console.log(data); 

}， 

(error) => { 
console.warn(error); 


]); 
我 们 通过 合适 的 参数 来 调用 getPhotos 方法 ， 它 返回 了 一 些 相 机 图 像 的 相关 数据 。 











在 “智能 天 气 应 用 ”中 ， 我 们 用 一 个 新 的 组 件 PhotoBackdrop ( 例 6-6) 禁 换 最 顶层 的 
<Image> 组 件 。 目 前 PhotoBackdrop 组 件 只 是 简单 地 从 用 户 的 相机 获取 最 新 图 片 。 











/| 














例 6-6: SmarterWeather/PhotoBackdrop/camera_roll_example.js 


var React = require('react-native'); 
var { Image, CameraRoll } = React; 
var styles = require('./style.js'); 


var PhotoBackdrop = Re 
getInitialState() { 
return { 
photoSource: null 


act.createClass({ 


} 
}, 
componentDidMount() { 
CameraRoll .getPhotos( 
{first:. 3} 
(data) => { 
this.setState({ 
photoSource: {uri: data.edges[3].node.image.uri} 
})}, 
(error) => { 
console.warn(error); 
用 ; 
和 
render() { 
return ( 
<Image 
style={styles.backdrop} 
source={ this.state.photoSource } 
resizeMode='cover'> 
{this.props.children} 
</Image> 
); 
} 
}); 


module.exports = PhotoBackdrop; 


CameraRoll.getPhotos 需要 三 个 参数 : 一 个 带 参 数 的 对 象 、 一 个 成 功 回调 函数 和 一 个 错误 
回调 函数 。 
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6.2.2 ”通过 getpPhotoParams 获 取 图 片 


getPhotoParans 对 象 接收 一 系列 参数 ， 不 过 奇怪 的 是 这 部 分 没有 包含 在 文档 中 。 可 以 从 
React Native 源码 (https://github.com/facebook/react-native/blob/master/Libraries/CameraRoll/ 


CameraRoll.js#L46) 查看 哪些 是 可 用 的 参数 。 


。 first 


数字 类 型 ， 想 要 逆序 显示 的 照片 数目 ( 即 最 新 保存 的 照片 )。 


。 after 








字符 串 类 型 ， 一 个 匹配 前 一 次 调用 getPhotos 的 page_info {end_cursor} 信息 的 指针 。 


。 groupTypes 





字符 串 类 型 ， 指 定 特 定 的 组 别 来 过 滤 结 果 。 可 能 是 41bum、411 和 Event 等 值 。 完 整 的 


GroupTypes 可 在 源码 中 查看 。 


。 groupName 














字符 串 类 型 ， 在 该 组 指定 一 个 过 滤器 ， 例 如 Recent Photos 或 一 个 相册 名 称 。 


。 assetType 





值 为 411、Photos 或 Videos 的 其 中 一 个 ， 为 资源 类 型 指定 一 个 过 


。 mimeTypes 


字符 串 数组 类 型 ， 基 于 MIME 类 型 进行 过 滤 (例如 image/jpeg)。 





局 。 


例 6-5 中 简单 使 用 了 getPhotos 方法 ， 我 们 的 getPhotoParams 对 象 相 当 简洁 : 





{first: 1} 


简单 来 说 ， 这 指明 了 我 们 要 寻找 最 近 的 图 片 。 


6.2.3 ”从 相机 演 染 一 张 图 片 
从 相机 获取 图 片 之 后 应 该 怎样 泻 染 呢 ? 让 我 们 来 看 成 功 回调 函数 ; 











(data) => { 
this.setState({ 
photoSource: {uri: data.edges[0].node.image.uri} 


})}, 


这 个 数据 对 象 的 结构 不 是 非常 直观 ， 因 此 你 可 以 使 用 调试 器 来 审查 对 象 。 每 一 个 data. 
edges 中 的 对 象 都 用 一 个 节点 (node) 属性 来 表示 一 张 图 片 ， 我 们 可 以 从 这 里 获取 实际 资 








源 的 URI。 
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你 可 能 会 想到 ， 一 个 <Image> 组 件 可 以 接收 一 个 URI 属性 。 所 以 ， 可 以 通过 正确 设置 
源 属性 的 方式 从 相机 渲染 一 张 图 片 。 








<Image source={this.state.photoSource} /> 





好 了 ， 现 在 可 以 看 到 包含 图 片 的 最 终 效 果 了 ， 如 图 6-4 所 示 。 

















图 片 





urrent weather for 











图 6-4: 从 相机 泻 染 一 张 图 片 
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6.2.4 展示 照片 列表 
有 很 多 应 用 为 用 户 提 供 了 选择 图 片 的 功能 。 那 么 我 们 应 该 怎样 演 染 图 片 选 择 的 界面 呢 ? 


















































如 果 你 是 iOS 用 户 ， 你 可 能 发 现 iOS 平台 提供 了 默认 的 选择 界面 ， 但 大 多 数 应 用 实际 上 实 
现 了 它们 自己 定制 的 界面 。 如 图 6-5 所 示 ，Twitter 和 Tumblr 都 有 定制 的 界面 。 就 Twitter 
而 言 ， 它 允许 你 在 发 布 界面 选择 图 片 。 



























































eee00 Verizon 全 9:13 AM (GM: I eee0o0 Verizon 全 9:14 AM @ 17 837% 有 加 
Photo post 
’ X 


Bonnie Eisenman 
印 @brindelle 











图 6-5: Tumblr ( 左 ) 和 Twitter ( 右 ) iOS 应 用 中 的 图 片 选择 界面 
默认 的 图 片 选择 界面 是 一 个 全 屏 的 对 话 框 ， 它 看 起 来 有 点 不 同 〈 图 6-6)。 
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Photos Cancel 
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Bursts 
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6-6: 默认 对 话 框 














因此 ， 你 既 可 以 使 用 内 置 的 界面 ， 也 可 以 自己 定制 一 个 。 应 用 通常 为 提供 标准 界面 之 外 的 
功能 而 开发 自己 的 定制 方案 。UIExplorer 应 用 (https://github.com/facebook/react-native/tree/ 
master/Examples/UIExplorer) 提供 了 一 个 非常 基础 的 关于 如 何 使 用 CameraRoll 接口 定制 简 
易 用 户 图 片 库 的 界面 的 例子 ， 如 图 6-7 所 示 。 
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图 6-7: UIExplorer 应 用 的 CameraRoll 的 例子 


这 是 由 先前 介绍 的 相机 交互 的 功能 加 上 一 个 <Listview> 组 成 的 。 不 仅 如 此 ， 还 可 以 用 这 种 


方法 开发 一 个 同时 支持 Android 和 iOS 的 跨 平台 图 片 选择 组 件 。 














ImagePickerI0S 模块 对 它 进行 支持 。 


在 iOS 系统 中 ， 原 生 的 界面 元 素 是 UIImagePickerController， 在 React Native 中 通过 
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Android 照片 选择 的 支持 情况 





目前 ，React Native 只 为 10S 提供 了 ImagepPickerI0S 接口 用 来 选择 we 
开启 摄像 头 ， 但 Android 还 未 被 支持 。 可 以 查看 官 文 文档 获取 最 新 的 信 ， 


(https://facebook.github.io/react-native/docs ) 。 








可 以 通过 下 面 这 种 通用 的 方式 导入 ImagePickerI0S 模块 。 











var { ImagePickerIOS } = React; 


接 下 来 使 用 它 就 非常 容易 了 ， 检 测 ImagePickerI0S 以 确认 是 否 可 以 使 用 相机 或 进行 视频 录 
制 ( 例 6-7)。 


例 6-7: 检测 是 否 能 通过 ImagePickerI0S 使 用 摄像 头 或 录像 


ImagePpickerI0S.canUseCamera((result) => { 
console.log(result); // boolean 


}); 


ImagepickerI0S.canRecordVideos((result) => { 
console.log(result); // boolean 


}); 


iml 





然后 ， 通 过 调用 openSelectDpialog 触发 一 个 照片 选择 的 对 话 框 ， 同 时 需要 传人 一 些 参数 ， 
比如 成 功 选 择 照 片 之 后 的 回调 函数 以 及 用 户 取 消 之 后 的 回调 函数 ( 例 6-8) 。 








例 6-8: 使 用 ImagePickerI0s 触发 照片 选择 对 话 框 


ImagePickerI0S .openSeLectDiaLog( 
{ 
showImages: true, 
showVideos: false, 
}, 
(data) => { 
this.setState({ 
photoSource: {uri: data} 


console.log('User canceled the action'); 


}); 





这 个 调用 会 触发 弹出 一 个 标准 的 10S 图 片 选择 对 话 框 (图 6-8)。 
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图 6-8: iOS 图 片 选 择 对 话 框 
数据 将 会 作为 URI 传人 成 功 回调 函数 中 ， 它 可 以 在 <Image> 组 件 的 源 属性 中 使 用 。 


6.2.5 上传 图 片 至 服务 器 


如 果 想 上 传 照片 到 其 他 地 方 该 怎么 办 呢 ? React Native 的 XHR 模块 包含 了 一 个 内 置 的 
片上 传 功能 ，UIExplorer 应 用 讲解 了 一 种 方法 (https://github.com/facebook/react-native/ 
blob/0.16-stable/Examples/UIExplorer/XHRExample.ios.js)。 
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var formdata = new FormData(); 
formdata.append('image', {...this.state.randomPhoto, name: 'image.jpg'}); 


xhr.send(formdata); 


XHR 是 XMLHttpRequest 的 缩写 。React Native 基于 iOS 网 络 接 口 实 现 了 XHR 接口 。 与 定 
位 接口 类 似 ，React Native 的 XHR 也 是 基于 MDN 规范 (https://developer.mozilla.org/en- 
US/docs/Web/API/XMLHttpRequest) 实现 的 。 





相 比 于 Fetch 接口 ， 使 用 XHR 进行 网 络 请 求 稍 微 有 点 复杂 ， 但 是 基本 用 法 就 像 例 6-9 这 样 。 
例 6-9: 通过 XHR 发 送 POST 请 求 来 上 传 照片 的 基本 结构 


var xhr = new XMLHttpRequest(); 

xhr.open('POST', 'http://posttestserver.com/post.php'); 

var formdata = new FormData(); 

formdata.append('image', {...this.state.photo, name: 'image.jpg'}); 
xhr.send(formdata); 


这 里 省 略 了 各 种 注册 XHR 请 求 的 回调 函数 。 


6.3 Asyncstore 持 久 化 数据 存储 


大 多 数 的 应 用 需要 持续 记录 各 式 各 样 的 数据 。 我 们 应 该 怎样 在 React Native 中 实现 这 个 功 
能 呢 ? 























iOS 为 我 们 提供 了 AsyncStorage， 一 个 应 用 于 全 局 的 键 值 对 存储 接口 。 如 果 你 曾经 使 用 过 
Web 平台 上 的 LocalStorage， 那 么 AsyncStorage 应 该 会 让 你 觉得 非常 熟悉 。AsyncStorage 
顾名思义 ， 是 一 个 异步 的 操作 。 这 个 接口 也 相当 简洁 ， 是 一 个 React Native 默认 自 带 的 模 
块 。 下 面 我 们 来 看 看 如 何 使 用 它 。 


AsyncStorage 使 用 的 储存 键 可 以 是 任意 字符 串 ， 它 通常 使 用 这 样 的 格式 : QAppName:key， 
例如 : 
































var STORAGE_KEY = '@SmarterWeather:zip'; 


AsyncStorage 模块 在 调用 getItem 和 setIten 方法 之 后 都 会 返回 一 个 Promise 对 象 。 比 如 在 
“智能 天 气 应 用 ”中 ， 我 们 可 以 在 componentDidMount 方法 中 加 载 存 储 的 邮编 : 





AsyncStorage.getItem(STORAGE_KEY) 

.then((vaLue) => { 

if (vaLue !== null) { 

this. getForecastForZzip(value); 

} 
}) 
.Catch((error) => console.log('AsyncStorage error: 
.done(); 


+ error.message)) 
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接着 ， 在 -getForecaseForzip 方法 中 ， 我 们 储存 邮编 ; 





AsyncStorage.setItem(STORAGE_KEY, zip) 
.then(() => console.log('Saved selection to disk: ' + zip)) 
.Catch((error) => console.log('AsyncStorage error: ' + error.message)) 
.done(); 

















AsyncStorage 同时 也 提供 了 删除 键 值 、 合 并 键 值 和 获取 所 有 可 用 键 值 等 方法 。 


其 他 存储 方式 
如 果 你 需要 处 理 复杂 的 、 结 构 化 的 数据 ， 或 者 仅仅 是 更 多 的 数据 ， 你 很 可 能 不 满足 于 简单 
的 键 值 对 存储 。 


有 一 个 iOS 通用 的 数据 库 SQLite 可 供 使 用 ， 不 过 它 不 是 React Native 内 置 的 模块 。 下 一 章 
将 会 介绍 如 何 为 React Native 包装 本 地 模块 ， 以 及 如 何 安装 别人 编写 的 模块 。 


一 
6.4 智能 天 气 应 用 
本 章 中 所 有 的 例子 都 可 以 在 SmarterWeather 目录 下 找到 。 该 应 用 在 第 
改 ， 已 经 有 了 一 些 变化 ， 因 此 我 们 再 看 一 下 整个 应 用 的 结构 (图 6-9 ) 。 
































3 章 的 基础 上 加 以 修 
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SmarterWeather/ 

Forecast 

[一 index.js 

LocationButton 

广 index, js 
styLe. js 

PhotoBackdrop 
camera_roll_example.js 
index.]js 
local_image.]js 
style.js 

android 
app 
build 
build.gradle 
gradle 
gradle.properties 
gradlew 
gradlew.bat 
settings.gradle 

index.android. js 

index.1ios.]js 

ios 
SmarterWeather 
SmarterWeather .xcodeproj 
SmarterWeatherTests 
main.jsbundle 

node_modules 

[一 react-native 

package.json 

styles 

[一 typography.js 

weather_project. js 











图 6-9: 智能 天 气 应 用 的 项 目 内 容 


顶层 组 件 位 于 weather_project.js 中 。 共 享 字体 样式 位 于 styles/typography.js 中 。Forecast/、 
PhotoBackdrop/、Button/ 和 LocationButton/ 目录 包含 了 智能 天 气 应 用 中 所 有 的 React 组 件 。 
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6.4.1 WeatherProject 组 件 


顶层 组 件 在 weather_project.js 文件 里 〈 例 6-10)。 这 里 包含 了 使 用 AsyncStorage 模块 储存 
最 近 搜 索 的 位 置信 息 的 功能 。 








例 6-10: SmarterWeather/weather_project.js 


var React = require('react-native'); 
var { 

StyleSheet, 

Text, 

View, 

TextInput， 

AsyncStorage, 

Image 
} = React; 


var Forecast = require('./Forecast'); 

var LocationButton = require('./LocationButton'); 

var STORAGE_KEY = '@SmarterWeather:zip'; 

var WEATHER_API_KEY = 'bbeb34ebf60ad50f7893e7440ale2b0b'; 

var API_STEM = 'http://api.openweathermap.org/data/2.5/weather?'; 











// 该 版 本 使 用 flowers.png 这 个 本 地 资源 。 
// var PhotoBackdrop = require('./PhotoBackdrop/local_image'); 


// 该 版 本 允许 你 选择 一 张 照 片 。 


var PhotoBackdrop = require('./PhotoBackdrop'); 











// 该 版 本 从 相机 选取 一 张 特定 的 照片 。 


// var PhotoBackdrop = require('./PhotoBackdrop/camera_roll_example'); 


var WeatherProject = Re 
getInitialState () { 
return { 
forecast: null 
}; 
}， 


act.createClass({ 


componentDidMount: function() { 
AsyncStorage.getItem(STORAGE_KEY) 
.then((vaLue) => { 
if (value !== nuLL) { 
this._getForecastForZzip(value); 
} 
}) 


.Catch((error) => console.log('AsyncStorage error: 
.done(); 


1 


+ error.message)) 


}, 


_getForecastForZzip: function(zip) { 
// 储存 邮编 信息 。 
AsyncStorage.setItem(STORAGE_KEY, zip) 
.then(() => console.log('Saved selection to disk: 


+ zip)) 
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.Catch((error) => console.log('AsyncStorage error: ' + error.message)) 
.done(); 


this._getForecast( 
“${API_STEM}q=${zip}&units=imperial&APPID=${WEATHER_API_KEY}* ); 
}, 


_getForecastForCoords: function(lat, lon) { 
this. getForecast( 
`“S{fAPI_STEM}Lat=S{ftLat}&Lon=SftLon}&units=imperiaL&APPID=S{NEATHER_API_KEY} ); 
}， 


_getForecast: function(url, cb) { 
fetch(url) 
.then((response) => response.json()) 
.then((responseJSON) => { 
console.log(responseJSON); 
this.setState({ 
forecast: { 
main: responseJSON.weather[0].main, 
description: responseJSON.weather[0].description, 
temp: responseJSON.main.temp 
} 
}); 
}) 
.Catch((error) => { 
console.warn(error); 
]); 
}， 


_handLeTextChange: function(event) { 
var zip = event.nativeEvent. text; 
this._getForecastForZip(zip); 

}， 


render: function() { 
var content = null; 
if (this.state.forecast !== null) { 
content = ( 
<View style={styles.row}> 
<Forecast 

main={this.state.forecast.main} 
description={this.state.forecast.description} 
temp={this. state.forecast. temp}/> 





</View>); 
} 
return ( 
<PhotoBackdrop> 
<View style={styles.overlay}> 
<View style={styles.row}> 
<Text style={textStyles.mainText}> 
Current weather for 
</Text> 
<View style={styles.zipContainer}> 
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<TextInput 
styLe={[textStyLes.mainText，styLes.ztpCode]} 
returnKeyType='go' 
onSubmitEditing={this._handleTextChange}/> 
</View> 
</View> 
<View style={styles.row}> 
<LocationButton onGetCoords={fthis. getForecastForCoords}/> 


</View> 
{content} 
</View> 
</PhotoBackdrop> 
); 
} 
]); 


var textStyles = require('./styles/typography.js'); 
var styles = StyleSheet.create({ 
overlay: { 
paddingTop: 5， 
backgroundColor: '#000000', 
opacity: 0.5, 


]， 

row: { 
width: 400 ， 
fLex: 1， 
flexDirection: 'row', 
flexWrap: 'nowrap', 
alignItems: 'center', 
justifyContent: 'center', 
padding: 30 

]， 

zipContainer: { 
flex: 1， 
borderBottomColor: '#DDDDDD', 
borderBottomWidth: 1， 
marginLeft: 5， 
marginTop: 3， 
width: 10 

}， 

zipCode: { 
width: 50, 
height: textStyles.baseFontSize, 

小 

]); 


module.exports = NeatherProject; 


它 使 用 了 styles/typography.js 中 的 共享 样式 ( 例 6-11)。 





例 6-11: 共享 字体 样式 在 SmarterWeather/styles/typography.js 中 
var React = require('react-native'); 
var { StyleSheet } = React; 
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3 


var baseFontSize = 18; 


var styles = StyleSheet.create({ 
bigText: { 
fontSize: baseFontSize + 8， 
color: '#FFFFFF' 
}, 
mainText: { 
fontSize: baseFontSize, 
color: '#FFFFFF' 
} 
}; 


// 允许 在 其 他 地 方 使 用 。 


styles['baseFontSize'] = baseFontSize; 





module.exports = styles; 


6.4.2 ” Forecast 组 件 


<Forecast> 组 件 展示 了 包括 温度 在 内 的 预报 信息 ， 被 其 上 的 <WeatherProject> 组 位 





该 组 件 的 代码 见于 例 6-12。 
例 6-12: Forecast 组 件 谊 染 关于 预报 的 信息 


var React = require('react-native'); 
var { Text, View, StyleSheet } = React; 
var styles = require('../styles/typography.js'); 


var Forecast = React.createClass({ 
render: function() { 
return ( 
<View style={forecastStyles.forecast}> 
<Text style={styles.bigText}> 
{this.props.main} 
</Text> 
<Text style={styles.mainText}> 
Current conditions:{this.props.description} 
</Text> 
<Text style={styles.bigText}> 
{this.props.temp}” F 
</Text> 
</View> 
); 
} 
]); 


var forecastStyles = StyLeSheet.create({ 
forecast: { 
alignItems: 'center' 
} 
]); 


moduLe.exports = Forecast; 





使 用 。 
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6.4.3 Button 组 件 


<Button> 组 件 是 一 个 可 复 用 的 容器 样式 组 件 。 它 提供 了 一 个 由 <TouchableHighlight> 包 
装 的 拥有 合理 样式 的 <Text> 组 件 。 组 件 的 主要 文件 在 例 6-13 中 ， 关 联 的 样式 文件 在 例 











6-14 中。 


例 6-13: 按钮 组 件 提供 一 个 拥有 合理 样式 的 由 <TouchableHighlight> 包装 的 <Text> 组 件 


var React = require('react-native'); 
var { 
Text， 
View， 
TouchableHighlight 
} = React; 
var styles = require('./style.js'); 


var Button = React.createClass({ 
propTypes: { 
onPress: React.PropTypes.func， 
label: React.PropTypes.string 
}， 


render: function() { 
return ( 
<TouchableHighlight onpress={this.props.onPress}> 
<View style={[styles.button, this.props.style]}> 


<Text> 
{this.props. label} 
</Text> 
</View> 
</TouchableHighlight> 
); 
} 
]); 


moduLe.exports = Button; 


例 6-14: 按钮 组 件 的 样式 
var React = require('react-native'); 
var { StyleSheet } = React; 


var baseFontSize = 16; 


var styles = StyleSheet.create({ 
button: { 
backgroundColor: '#FFDDFF', 
width: 200， 
padding: 25， 
borderRadius: 5 
}, 
]); 


module.exports = styles; 
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6.4.4 _ LocationButton 组 件 


当 被 点 击 时 ，<LocationButton> 获取 用 户 的 位 置信 息 并 触发 一 个 回调 。 组 件 的 主 JavaScript 
文件 在 例 6-15 中 ， 样 式 文件 在 例 6-16 中 。 





瑟 














例 6-15: <LocationButton> 组 件 


var React = require('react-native'); 
var styles = require('./style.js'); 
var Button = require('./../Button'); 


var LocationButton = React.createClass({ 
propTypes: { 
onGetCoords: React.PropTypes.func.isRequired 


}, 


_onPress: function() { 
navigator .geolocation.getCurrentPosition( 
(initialPosition) => { 
this.props.onGetCoords(initialPosition.coords.latitude, 
initialPosition.coords.longitude); 
3 
(error) => {alert(error.message)}, 
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 


); 

}， 

render: function() { 
return ( 


<Button label="Use CurrentLocation" 
style={styles.locationButton} 
onpress={this._onpress}/> 
); 
} 
]); 


module.exports = LocationButton; 


例 6-16: <LocationButton> 的 样式 


var React = require('react-native'); 
var { StyleSheet } = React; 





var baseFontSize = 16; 


var styles = StyleSheet.create({ 
LocationButton: { 
backgroundColor: '#FFDDFF', 
width: 200， 
padding: 25， 
borderRadius: 5 
}, 
]); 


module.exports = styles; 
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6.4.5 ”PhotoBackdrop 组 件 


为 了 说 明 选 择 背 景 

















第 一 个 版 本 见于 例 


图 片 的 三 种 不 同 的 方法 ， 这 里 提供 了 三 种 版 本 的 <PhotoBackdrop> 组 件 。 
6-17， 在 GitHub 仓库 里 对 应 local_image.js 文件 ， 它 使 用 require 语句 





调用 标准 的 图 片 资 源 。 第 二 个 版 本 见于 例 6-18， 对 应 GitHub 仓库 的 camera_roll_example.js 





文件 ， 它 允许 用 户 
仓库 的 index.js 文 伯 











从 相册 里 选择 图 片 。 最 后 ， 例 6-19 是 第 三 个 版 本 的 实现 ， 对 应 GitHub 
， 这 个 版 本 使 用 ImagePickerI0S 来 提示 用 户 选 择 背 景 图 片 。 











I 





例 6-17: 最 初版 本 的 local_image.js， 使 用 一 个 简单 的 require 语句 


var React = require('react-native'); 


var { Image } 


= React; 


var styles = require('./style.js'); 


var PhotoBackdrop = React.createClass({ 


render() { 
return ( 


<Image 
style={styles.backdrop} 
source={require('image!flowers')} 
resizeMode='cover'> 
{this.props.children} 

</Image> 


); 
} 
二 


module.exports = PhotoBackdrop; 


例 6-18: camera_roll_example.js 使 用 代码 从 相册 中 选择 一 张 区 








豆 
于 








var React = require('react-native'); 
var { Image, CameraRoll } = React; 
var styles = require('./style.js'); 


var PhotoBackdrop = React.createClass({ 
getInitialState() { 


return { 


photoSource: null 


} 
}， 


componentDidMount() { 
CameraRoll.getPhotos( 


{first: 


5}, 


(data) => { 
this.setState({ 
photoSource: {uri: data.edges[3].node.image.uri} 


=> { 


console.warn(error); 


})}, 
(error) 
]); 
3 
render() { 
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return ( 
<Image 
style={styles.backdrop} 
source={ this.state.photoSource } 
resizeMode='cover'> 
{this.props.children} 
</Image> 
); 
} 
]); 


moduLe.exports = PhotoBackdrop; 


例 6-19: 最 后 一 个 版 本 的 index.js， 采 用 ImagePickerI0S 并 提示 用 户 选 择 一 张 图 片 


var React = require('react-native'); 
var { 
Image， 
ImagePickerI0OS 
} = React; 
var styles = require('./style.js'); 
var Button = require('./../Button'); 
var PhotoBackdrop = React.createClass({ 
getInitialState() { 
return { 
photoSource: require('image!flowers') 
} 
}， 
_pickImage() { 
ImagePickerI0OS .openCameraDiaLog( 
癸 ， 
(data) => { 
this.setState({ 
photoSource: {uri: data} 





}); 
]， 
() => { 
console.log('User canceled the action'); 
]); 
}， 
render() { 
return ( 
<Image 
style={styles.backdrop} 
source={ this.state.photoSource } 
resizeMode='cover'> 
{this.props.children} 
<Button 
style={styles.button} 
label="Load Image" 
onpPress={this. pickImage}/> 
</Image> 
); 
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} 
3 


module.exports = PhotoBackdrop; 
这 三 个 版 本 都 共享 了 相同 的 样式 ， 如 例 6-20 所 示 。 
例 6-20: 三 个 版 本 的 <PhotoBackdrop> 都 使 用 这 个 样式 表 


var React = require('react-native'); 


var { StyleSheet } = React; 


var styles = StyleSheet.create({ 
backdrop: { 
flex: 1， 
flexDirection: "CoLumn' 


}， 
button: { 
flex: 1， 
margin: 100， 
alignItems: "Center ' 
} 
]); 


module.exports = styles; 


6.5 小 结 


在 本 章 中 ， 我 们 对 天 气 应 用 进行 了 一 些 修改 ， 然 后 接触 了 地 理 定位 (Geolocation)、 相 机 
(Camera Roll) 和 存储 (AsyncStorage) 接口 ， 最 后 学 习 了 如 何 将 这 些 接口 整合 到 应 用 中 
去 。 由 于 这 些 接口 的 支持 程度 因 平 台 而 不 同 ， 所 以 我 们 应 该 隔离 将 要 使 用 的 组 件 ， 由 此 我 
们 就 可 以 包装 平台 无 关 的 组 件 ， 正 如 第 4 章 所 展示 的 。 


撤 开 兼容 性 问题 ， 如 果 React Native 提供 了 宿主 平台 接口 的 支持 ， 那 么 使 用 起 来 就 会 得 心 
应 手 。 但 是 假如 React Native 不 支持 某 个 接口 ， 比 如 视频 回放 的 功能 ， 这 时 你 需要 使 用 一 
个 非 JavaScript 实现 的 类 库 或 模块 ， 那 应 该 怎么 做 呢 ? 在 下 一 章 中 ， 我 们 将 详细 介绍 这 种 
情况 的 解决 方案 。 
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第 7 章 


模块 





第 6 章 介 绍 了 一 些 如 何 与 React Native 封装 的 宿主 平台 接口 交互 的 知识 。 例 如 ， 相 机 和 地 
里 定位 这 样 的 接口 是 平台 特定 的 ， 但 React Native 为 了 便利 ， 已 经 帮 有 我 们 暴露 了 接口 。 由 
于 这 些 接口 已 经 集成 到 React Native， 因 此 使 用 起 来 非常 方便 。 


如 果 要 使 用 一 个 React Native 不 支持 的 接口 ， 应 该 怎么 做 呢 ? 本 章 将 介绍 如 何 通 过 npm 安 
装 由 React Native 社区 .编写 的 模块 。 同 时 ， 我 们 也 要 深入 学 习 一 个 iOS 模块 react-native- 
video 的 安装 过 程 ， 以 及 RCTBridgeModule 是 如 何 允 许 用 户 为 现 有 的 Objective-C 接口 添加 
JavaScript 接口 的 。 最 后 ， 我 们 再 来 看 如 何 导 入 纯 JavaScripto 类 库 到 你 的 工程 中 ， 以 及 如 
何 管理 依赖 。 


























本 章 会 涉及 一 些 Objective-C 和 Java 代码 ， 不 过 别 担心 ， 我 们 会 放 慢 脚步 。 完 整 的 iOS 和 
Android 移动 应 用 开发 的 介绍 超出 了 本 书 的 范围 ， 但 是 我 们 也 会 一 起 学 习 一 些 例子 。 

















7.1 使 用 npm 安 装 JavaScript 类 库 


在 讨论 原生 模块 工作 原理 之 前 ， 先 来 看 外 部 依赖 通常 是 怎样 安装 的 。React Native 使 
用 npm 进行 依赖 管理 。npm 虽然 是 一 个 Node.js 的 包 管 理 器 ， 但 npm 仓库 囊括 了 所 有 
JavaScript 工程 ， 而 不 仅仅 是 Node 平台 。npm 使 用 一 个 名 为 package.json 的 文件 来 储存 包 
括 一 系列 依赖 在 内 的 项 目 元 数据 。 


我 们 从 一 个 全 新 的 项 目 开 始 : 























react-native init Depends 
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创建 一 个 新 工程 之 后 ， 你 的 package.json 文件 看 起 来 如 下 所 示 : 








{ 
"Name": "Depends", 
"version": "0.0.1", 
"private": true, 
"scripts": { 
"start": "node modules/react-native/packager/packager.sh" 
}， 
"dependencies": { 
"react-native": "^0.12.0" 
} 
J 














目前 为 止 ， 项目 最 顶层 的 依赖 是 react-native。 让 我 们 添加 其 他 的 依赖 ! 


lodash 库 与 Underscore.js 非常 类 似 ， 它 提供 了 一 系列 实用 的 工具 函数 ， 例 如 针对 数组 的 
shuffle 函数 。 我 们 在 安装 时 附带 --save 参数 ， 它 将 会 被 添加 到 依赖 列表 中 : 











npm install --save lodash 
现在 ， 你 的 package.json 文件 被 更 新 如 下 : 
"dependencies": { 
"lodash": "^3.10.1", 
"react-native": "^0.12.0" 
} 
如 果 想 在 React Native 应 用 中 使 用 lodash， 可 以 这 样 引入 它 ; 
var _ = require('lodash'); 


现在 ， 我 们 使 用 lodash 来 打印 一 个 随机 数 : 


var _ = require('lodash'); 
console.log('Random number: ' + _.random(0, 5)); 





成 功 输出 了 ! 但 是 其 他 模块 是 怎样 的 呢 ? 我 们 可 以 通过 npm install 引入 任何 第 三 方 包 吗 ? 





答案 当然 是 “可 以 ”， 但 有 一 些 额外 的 说 明 。 例 如 ， 任 何 涉及 DOM 操作 的 方法 都 会 运行 
失败 。 和 现 有 的 第 三 方 包 集成 可 能 需要 一 些 技巧 ， 因 为 大 多 数 类 库 都 假定 了 它们 运行 的 环 
境 。 但 一 般 而 言 你 可 以 使 用 任何 JavaScript 包 ， 也 可 以 和 其 他 JavaScript 工程 一 样 使 用 npm 
来 管理 项 目 依赖 。 


7.2 iOS 原 生 模块 


既然 已 经 学 会 了 如 何 通 过 npm 添加 外 部 JavaScript 类 库 ， 那 么 现在 让 我 们 通过 npm 安 
装 一 个 React Native 组 件 吧 。 在 这 一 节 中 ， 我 们 营 试 使 用 react-native-video， 一 个 由 











模块 | 121 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





Brent Vatne 实现 的 React Native 组 件 ， 把 它 作为 主要 的 例子 。 这 个 模块 为 我 们 提供 了 一 
个 <Video> 组 件 ， 可 以 用 来 播放 视频 ( 太 棒 了 ! )。 最 后 ， 我 们 将 会 学 习 底 层 原生 模块 与 
Objective-C 及 iOS 协同 工作 的 原理 。 


7.2.1 导入 第 三 方 组 件 
react-native-video 组 件 储 存在 npm 仓库 (https:/www.npmjs.com/package/react-native- 
video) 中 。 我 们 可 以 通过 npm install 将 其 添加 到 项 目 里 : 





npm install react-native-video --save 
如 果 是 在 做 传统 的 Web 开发， 那么 一 切 都 已 经 完成 了 ! react-native-video 已 经 可 以 在 
项 目 中 使 用 了 。 不 幸 的 是 ， 在 这 里 并 不 是 这 样 的 ; 在 iOS 开发 中 ， 我 们 需要 告知 Xcode 存 
在 这 个 类 库 。 


在 Xcode 中 打开 项 目 ， 在 Libraries 上 单 击 右键 ， 然 后 选择 Add Files to“Depends”.… ( 
7-1) 。 











加 


















ml main.m 
p> 有 Libraries 
P i DependsTes 






Show in Finder 

Open with External Editor 

Pp | Products Open As > 
Show File Inspector 














New File... 


Add Files to “Depends”.. 























7-1; 右键 单 击 Libraries， 选 择 Add Files to “Depends”.… 


接着 ， 添 加 RCTVideo.xcodeproj 文件 到 工程 中 (图 7-2)。 





图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 


























塘 Xcode File Edit View Find Navigate Editor Product Debug Source Control Window Help 的 区 其 外 串 会 辐 ssx[ 和 Mon650PM Q 江 
i@ b> Bm ADepenss) logomorphica Depends:Resdy | Todayat6:50PM 1 二 口 已 口 
DaQaoAMAesoe la 三 中国 融 - Depends 所 Q Do 
a 
Tr 二 
> 并 Depends 
上 BU Lbrares ® Rocents 
> DopendsTests EE Hacking 
* a Products 
节 Dropbox 
园 Al My Files 
国 screenshots 
© iCloud Drive 2 
A Applications 
加 Desktop » MM node_modules Aug 18, 2015, 8:40 AM 四 wap we 
packagejson Aug 18, 2015, 6:40 AM 
团 Documents 到 Rcrvideoh Jun 10, 2015, 1:26 PM 
© Downloads RCTVideo.m Aug 8, 2015, 2:59 AM 
ee erh Jun 10, 2015, 1:26 PM 
国 learning-react-native m RCTVideoManagerm Jul 15, 2015, 11:13 AM 
Destination: & Copy tems ifneeded 
Added folders: Create groups 
© create folder references 
Add to targets: @ A Depends Doeo 
DependsTests i 
Touch elas 
Tost Case Class -Aclass 
可 。 mperertrg a rw test 
Playground - An Os Prayoround 
+1@ 回 |@ New Folder Cancel Add 




















图 7-2: 从 列表 中 选择 RCTVideo.xcodeproj; 它 应 该 在 node_modules/react-native-video 目录 下 


同时 ， 你 也 需要 添加 视频 框架 到 工程 的 build process (构建 过 程 ) 中 。 打 开工 程 的 build 
process， 然 后 展开 Link Binary With Libraries 子 菜单 ， 点 击 “+” 号 ， 添 加 1libRCTVideo.a 
到 工程 中 (图 7-3)。 
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图 7-3: 添加 libRCTVideo.a 文件 (可 以 使 用 搜索 框 帮助 你 定位 文件 ) 
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完成 上 面 的 工作 之 后 ，RCTVideo 模块 就 成 功 导 入 到 工程 中 了 。 我 们 还 需要 导入 一 个 mp4 
视频 文件 到 Xcode 工程 ， 这 样 才 可 以 把 它 当 做 资源 使 用 。 在 工程 文件 上 单 击 右键 ,再 次 选 
择 Add Files to Depends， 如 图 7-4 所 示 。 


任何 mp4 视频 文件 应 该 都 可 以 使 用 。 我 使 用 的 是 手头 已 有 的 一 个 项 目 中 的 视频 ， 你 可 以 
从 GitHub 网 站 下 载 (https://github.com/bonniee/learning-react-native/blob/master/Depends/iOS/ 


PianoStairs.mp4?raw=true ) 。 
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图 7-4: 选择 想 使 用 的 视频 文件 ， 这 里 ， 我 们 选择 PianoStairs.mp4 文件 





然后 ， 你 应 该 可 以 在 工程 列表 里 看 到 一 个 视频 文件 (图 7-5)。 




















@@e@ Pp 园 次 Depends 》 U 


EAN 


Pe Depends 
Y 图 , targets, iOS SDK 8.4 M 


Pp SN Depends 
> Libraries 
Pp SN DependsTests 
p> BN Products 
































图 7-5: 视频 被 成 功 添加 到 工程 之 后 ， 可 以 在 Xcode 中 看 到 它 
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7.2.2 ”使 用 视频 组 件 


好 了 ， 既 然 我 们 已 经 成 功 导 入 到 Xcode， 现 在 可 以 在 JavaScript 代码 中 引入 Video 组 件 了 。 
var Video = require('react-native-video'); 


然后 你 就 可 以 像 使 用 普通 组 件 一 样 使 用 它 了 。 这 里 我 设置 了 一 些 可 选 的 属性 : 





<Video source={{uri: "PianoStairs"}} // 可 以 是 URL 或 本 地 文件 。 





rate={1.0} // 9 表示 暂停 ,1 表示 正常 。 
volume={1.0} // 9 表示 静音 ,1 表示 正常 。 
muted={false} // 是 否 完全 静音 。 
paused={false} // 是 否 完全 和 暂停 播放 。 
resizeMode="cover" // 是 否 按 高 宽 比 覆盖 整个 屏幕 
repeat={true} // 是 否 自动 循环 播放 。 





style={styles.backgroundVideo} /> 
哇 ! 我 们 添加 了 一 个 视频 组 件 ! 


虽然 相 比 于 简单 的 npm install 命令 ， 使 用 React Native 第 三 方 模块 的 过 程 可 能 有 些 复杂 ， 
但 还 可 以 接受 。 比 较 让 人 困惑 的 应 该 就 是 引入 第 三 方 库 到 Xcode 工程 以 及 怎样 使 用 Xcode 
了 。 像 react-native-video 这 样 的 模块 通常 都 是 专 为 React Native 开发 的 ， 在 它 项 目的 
README 文件 里 一 般 都 有 详细 的 安装 和 使 用 说 明 ， 所 以 这 应 该 不 成 问题 。 不 要 让 Xcode 
的 这 部 分 交互 阻碍 你 在 代码 里 使 用 第 三 方 模块 ! 

















还 有 大 量 这 样 的 组 件 都 在 npm 仓库 里 ， 它 们 通常 都 使 用 了 react-native- 前 级 。 你 可 以 随 
便 答 往 ， 看 看 社区 都 开放 了 哪些 资源 。 





7.2.3 剖析 Objective-C 原 生 模块 


既然 我 们 使 用 过 了 react-native-video 组 件 ， 现 在 我 们 一 起 看 看 模块 在 底层 究竟 是 怎样 工 
作 的 吧 。 








react-native-video 是 一 个 React 引用 原生 模块 的 组 件 (https://facebook.github.io/react- 
native/docs/native-modules-ios.html) 。React Native 文档 是 这 样 定 义 原生 模块 的 :“ 一 个 实现 
了 RCTBridgeModule 协议 的 Objective-C 类 。”(RCT 是 ReaCT 的 缩写 。) 





编写 Objective-C 代码 不 是 React Native 标准 开发 流程 的 一 部 分 ， 所 以 不 用 担心 ， 这 不 是 
必要 的 知识 ! 当然 ， 如 果 有 基础 的 代码 阅读 能 力 ， 可 以 看 懂 代 码 的 话 ， 会 对 你 有 很 大 的 帮 
助 ， 即 便 你 还 没有 打算 实现 自己 的 原生 模块 。 





如 果 你 之 前 从 未 使 用 过 Objective-C， 可 能 大 多 数 的 语法 会 让 你 感到 困惑 。 没 关系 ， 慢 慢 
来 。 首 先 我 们 开发 一 个 基础 的 “Hello, World” 模 块 。 


Objective-C 类 通常 有 一 个 以 .h 结尾 的 头 文 件 ， 它 包含 了 类 的 接口 。 但 实际 上 我 们 在 .m 里 
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实现 功能 。 我 们 从 编写 HelloWorld.h 文件 开始 ， 如 例 7-1 所 示 。 


例 7-1: Depends/iOS/HelloWorld.h 
#import "RCTBridgeModule.h" 


Qinterface HelloWorld : NSObject <RCTBridgeModule> 
@end 


这 个 文件 有 什么 用 处 呢 ? 在 第 一 行 ， 我 们 导入 了 RCTBridgeModule 头 文件 (注意: # 符 号 不 
表示 注释 ， 而 是 导入 语句 的 一 部 分 )。 接 着 下 一 行 ， 我 们 定义 了 一 个 Helloworld 类 ， 它 继 
承 自 NS0bject 并 实现 了 RCTBridgeModule 接口 ， 最 后 通过 @end 完成 接口 的 定义 。 











由 于 历史 原因 ， 许 多 Objective-C 的 类 型 都 有 NS 前 级 (NSString、NSObject 等 ) 。 
现在 我 们 转移 到 具体 的 实现 中 去 ( 例 7-2)。 


例 7-2: Depends/iOS/HelloWorld.m 


#import "HelloWorld.h" 
#import "RCTLog.h" 


@implementation HelloWorld 
RCT_EXPORT_MODULE( ); 
RCT_EXPORT_METHOD(greeting:(NSString *)name) 


RCTLogInfo(@"Saluton, %@", name); 
了 


@end 
在 一 个 .m 文件 里 ， 你 需要 导入 相应 的 .h 文件 ， 像 第 一 行 这 样 。 我 还 导入 了 RCTLog.h， 这 


样 我 们 就 可 以 使 用 RCTLogInfo 输出 日 志 到 控制 台 。 在 导入 其 他 Objective-C 类 时 ， 我 们 总 
是 导入 头 文件 ， 而 不 是 .m 文件 。 





@implementation 和 @end 这 两 行 表明 在 它们 之 间 的 内 容 是 HeLLoworLd 类 的 具体 实现 。 


剩 下 的 几 行 是 React Native 模块 主要 功能 的 实现 代码 。 通 过 RCT_EXPORT_MODULE()， 我 们 
调用 了 一 个 特殊 的 React Native 宏 ， 由 此 可 以 访问 React Native 的 “桥接 "。 同 样 ， 我 们 的 
greeting:name 的 方法 定义 也 以 一 个 宏 开头 ， 它 导出 了 RCT_EXPORT_METHOD 这 一 方法 ， 因 此 
我 们 可 以 在 JavaScript 代码 中 使 用 它 。 


需要 注意 的 是 ， 这 里 Objective-C 方法 的 命名 有 一 点 奇怪 。 每 一 个 参数 名 称 都 是 被 包含 在 
方法 名 称 里 的 。 这 是 React Native 的 约定 ，JavaScript 函数 名 称 是 Objective-C 名 称 从 开始 
到 第 一 个 冒号 为 止 的 部 分 ， 因 此 greeting:name 就 成 了 JavaScript 里 的 greeting。 如 果 你 愿 
意 ， 可 以 使 用 RCT_REMAP_METHOD 宏 重 新 制定 命名 规则 。 
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后 就 可 以 在 JavaScript 文件 里 调用 这 个 方法 了 ( 例 7-3)。 





例 7-3: 在 JavaScript 代码 里 使 用 HelloWorld 模块 


var HelloWorld = require('react-native').NativeModules.HelloWorld; 
HelloWorld.greeting('Bonnie'); 


输出 的 内 容 应 该 会 出 现在 控制 台 里 (图 7-6)， 你 可 以 同时 在 Xcode 和 Chrome 开发 者 工具 
里 看 到 输出 内 容 ， 如 果 同 时 启用 了 它们 的 话 。 
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图 7-6: 控制 台 输 出 ， 通 过 Xcode 界面 查看 


可 以 看 到 导入 原生 模块 的 语法 有 点 宛 长 。 一 个 常用 的 办 法 是 用 JavaScript 封装 原生 模块 
( 例 7-4) 。 


例 7-4: Depends/HelloWorld.js: 用 JavaScript 封装 HelloWorld 原生 模块 


var HelloWorld = require('react-native').NativeModules.HelloWorld; 
module.exports = HelloWorld; 





于 是 ， 导 入 过 程 变 得 更 加 直观 了 : 
var HelloWorld = require('./HelloWorld'); 


HelloWorld.js 这 个 JavaScript 文件 也 是 一 个 添加 JavaScript 代码 到 你 的 模块 中 的 一 个 
好 方法 。 


哇 ， 人 让 人 感觉 有 些 元 长 ， 并 且 我 们 需要 操作 几 个 不 同 的 文件 。 不 过 要 祝贺 你 ， 
你 已 经 用 Objective-C 编写 了 一 个 “Hello, World” 模 块 啦 ! 


回顾 一 下 ， 使 一 个 Objective-C 模块 生效 ， 需 要 遵守 以 下 几 条 规则 : 





。 导入 RCTBridgeModule 头 文件 ; 
。 声明 模块 并 实现 RCTBridgeModule 协议 ; 

。 调用 RCT_EXPORT_MODULE() 安 

。 使 用 RCT_EXPORT_METHOD 宏 导 出 至 少 一 个 方法 。 


























然后 原生 模块 就 可 以 使 用 iOS SDK 提供 的 任何 接口 了 (注意: 你 为 React Native 提供 的 接 
口 必 须 是 异步 的 )。Apple 公司 提供 了 iOS SDK 的 扩展 文档 ， 同 时 还 有 大 量 的 第 三 方 资源 
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可 以 使 用 。 值 得 一 提 的 是 ， 你 的 开发 者 账号 现在 就 会 派 上 用 场 ， 通 常 没有 开发 者 账号 就 很 
难 访问 SDK 文档 。 











既然 我 们 已 经 编写 了 自己 的 基础 “Hello, World” 模 块 ， 那 么 下 一 步 将 深入 介绍 react- 
native-video 是 如 何 工 作 的 。 





7.2.4 ”RCTVideo 的 实现 

正如 HelloWorld 模块 一 样 ，RCTVideo 也 是 一 个 原生 的 模块 ， 并 且 它 实现 了 RCTBridgeModule 
协议 。 你 可 以 在 GitHub 仓库 看 到 RCTVideo 完整 的 代码 (https://github.com/brentvatne/react- 
native-video) ， 我 们 使 用 的 是 0.6.0 版 本 。 














react-native-video 是 一 个 由 iOS SDK 提供 的 AvPLayer 接口 的 一 个 基础 封装 。 我 们 再 具 
体 看 看 它 是 如 何 工 作 的 ， 从 Video.ios.js 和 Video.android.js 这 两 个 JavaScript 入 口 文件 开 
台 。 在 这 个 版 本 里 ，Video.android.js 还 没有 被 实现 ， 所 以 我 们 看 看 Video.ios.js (https:// 
github.com/brentvatne/react-native-video/blob/1fObal347b783c2fleOfd36a2a757560f296ace5/ 


Video.ios.js)。 























我 们 会 发 现 它 为 原生 组 件 提供 了 一 个 很 薄 的 封装 层 ，RCTVideo 执行 一 些 属性 的 规范 化 检 
查 ， 还 有 一 些 额 外 的 泻 染 逻辑 。 原 生 组 件 在 末尾 被 导入 : 





var RCTVideo = requireNativeComponent('RCTVideo', Video); 


正如 在 HelloWorld 例子 中 看 到 的 一 样 ， 这 里 意味 着 RCTVideo 组 件 一 定 在 Objective-C 的 某 处 
被 导出 了 。 我 们 看 看 RCTVideo.h (https://github.com/brentvatne/react-native-video/blob/ 1f0bal 
347b783c2fle0fd36a2a757560f296ace5/RCTVideo.h) : 





// RCTVideo.h 
#import "RCTView.h" 


@class RCTEventDispatcher; 
@interface RCTVideo : UIView 


- (instancetype)initWithEventDispatcher: 
(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER; 


@end 





这 一 次 ， 它 没有 继承 自 NS0bject， 而 是 继承 了 UIView。 这 很 容易 理解 ， 因 为 它 泻 染 了 一 个 
视图 组 件 。 





如 果 再 来 看 实现 的 文件 RCTVideo.m (https://github.com/brentvatne/react-native-video/blob/ 
1f0bal347b783c2fle0fd36a2a757560f296ace5/RCTVideo.m)， 会 发 现 这 里 有 很 多 代码 。 在 实 
例 变 量 的 顶部 ， 记 录 了 音量 、 播 放 速 率 和 AVPlayer 自身 等 信息 。 
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这 里 应 该 看 一 下 methodQueue 这 个 有 趣 的 方法 : 


- (dispatch_queue_t)methodQueue 


{ 


return dispatch get main queue(); 


} 





这 里 告知 系统 必须 使 用 iOS 的 主线 程 执行 代码 ， 因 为 该 模块 使 用 了 仪 适用 于 主线 程 的 iOS 





接口 。 


代码 里 还 有 一 些 方法 ， 比 如 计算 视频 的 长 度 、 加 载 视频 和 设置 源 及 更 多 的 功能 。 不 妨 看 一 


下 这 些 方法 ， 了 解 它们 起 了 什么 作用 。 


另 一 个 让 人 困惑 的 是 RCTVideoManager。 为 了 创建 一 个 原生 UI 组 件 而 不 仅仅 是 一 个 模块 ， 
































我 们 需要 一 个 视图 管理 器 。 正 如 它 的 名 称 所 表示 的 ， 当 视图 在 处 理 





些 演 染 逻 辑 和 类 似 的 























任务 时 ， 视 图 管理 器 就 会 处 理 其 他 的 逻辑 (事件 处 理 、 属 性 导出 等 )。 视 图 管理 器 类 至 少 


需要 : 


。 继承 RCTViewManager 类 ， 
。 使 用 RCT_EXPORT_MODULE() 宏 ; 
。 实现 -(UIView *)view 方法 。 


view 方法 需要 返回 一 个 UIView 实例 。 这 里 我 们 发 现 它 被 实例 化 并 返回 了 一 个 RCTVideo: 


- (UIView *)view 


{ 


return [[RCTVideo alloc] initwithEventDispatcher:self.bridge. 


} 





RCTVideoManager 也 导出 了 一 些 属 性 和 常量 : 


RCT_EXPORT_VIEW_PROPERTY(src，NSDictionary); 
RCT_EXPORT_VIEW_PROPERTY(resizeMode, NSString); 
RCT_EXPORT_VIEW_PROPERTY(repeat, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(paused, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(muted, BOOL); 
RCT_EXPORT_VIEW_PROPERTY(volume, float); 
RCT_EXPORT_VIEW_PROPERTY(rate, float); 
RCT_EXPORT_VIEW_PROPERTY(seek, float); 


- (NSDictionary *)constantsToExport 
{ 
return @{ 
@"ScaleNone": AVLayerVideoGravityResizeAspect, 
@"ScaleToFill": AVLayerVideoGravityResize, 
@"ScaleAspectFit": AVLayerVideoGravityResizeAspect, 
@"ScaleAspectFill": AVLayerVideoGravityResizeAspectrFill 
}; 





eventDispatcher ]; 
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RCTVideo 和 RCTVideoManager 共同 由 RCTVideo 原生 UI 组 件 组 成 ， 我 们 可 以 在 应 用 内 随意 
使 用 它 。 正 如 你 所 看 到 的 ， 利 用 iOS SDK 编写 原生 模块 需要 花费 一 些 工夫 ， 但 也 不 是 不 可 
加 双 的 。 你 之 前 的 10S 开发 经 验 会 对 你 有 很 大 的 帮助 。iOS 开发 完整 的 介绍 目前 超出 了 本 
书 的 范围 ， 但 即使 你 没有 Objective-C 的 经 验 ， 通 过 查看 别人 的 原生 模块 ， 你 也 应 该 能 开始 
尝试 编写 自己 的 原生 模块 了 。 


7.3 Android 原生 模块 


Android 原生 模块 与 iOS 原生 模块 非常 类 似 。 你 可 以 在 官方 文档 中 找到 更 多 关于 Android 
原生 模块 的 相关 信息 (https://facebook.github.io/react-native/docs/native-modules-android. 
html) 。 











在 这 一 节 中 ， 我 们 将 在 AndroidDepends/ 项 目 目录 下 进行 开发 。 首 先进 入 目录 ， 然 后 创建 
一 个 新 的 项 目 : 


react-native init AndroidDepends 


7.3.1 ”安装 第 三 方 组件 

此 处 将 安装 react-native-linear-gradient 包 ， 它 为 我 们 提供 了 一 个 <LinearGradient> 组 
件 。 由 于 创建 渐变 是 一 个 相对 依赖 显卡 的 任务 ， 所 以 这 个 组 件 采 用 原生 平台 接口 是 非常 有 
意义 的 。 为 此 ，<LinearGradient> 提供 了 统一 的 React Native 组 件 ， 它 分 别 在 底层 各 自 调 
用 了 Android 的 android.graphics 包 和 iOS 的 CAGradientLayer 接口 。 你 可 以 在 GitHub 上 
找到 这 个 项 目 (https://github.com/brentvatne/react-native-linear-gradient) 。 




















正如 iOS 平台 一 样 ， 安 装 Android 平台 的 原生 模块 也 需要 接触 Android 项 目的 代码 。 总 体 
来 说 ， 为 了 导入 一 个 第 三 方 Android 原生 模块 ， 需 要 以 下 三 个 步骤 : 


(1) 更 新 android/settings.gradle 文件 ， 将 模块 加 入 到 Android 构建 过 程 中 ， 
(2) 把 模块 作为 依赖 列 在 android/app/build.gradle 文件 内 ; 
(3) 在 MainActivity.java 里 导入 包 ， 并 将 它 引 入 成 为 一 个 React Native 可 用 的 包 。 














让 我 们 来 逐一 查看 这 些 步 又。 首先 更 新 settings.gradle 文件 ， 导 入 react-native-linear- 
gradient 目录 。settings.gradle 文件 如 例 7-5 所 示 。 








例 7-5: AndroidDepends/android/settings.gradle 


rootProject.name = 'AndroidDepends' 


include ':app', ':react-native-linear-gradient’ 
project(':react-native-linear-gradient').projectDir = 
new File(rootProject.projectDir, 
'../node_ modules/react-native-linear-gradient/android') 
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“gradle” 是 一 个 Android 的 构建 系统 。 当 我 们 使 用 npm install 安装 react-native-linear- 
gradient 包 时 ， 相 关 的 Android 文件 也 会 被 下 载 到 node_modules/ 目录 下 。 我 们 通过 更 新 
settings.gradle 文件 来 引入 这 个 目录 。 


接 下 来 ， 我 们 要 把 react-native-Linear-gradient 模块 作为 依赖 添加 到 build.gradle 文件 中 
( 例 7-6)。 你 会 发 现 这 个 文件 已 经 包含 了 一 些 构建 设置 ， 例 如 目标 Android SDK 的 版 本 以 
及 React Native 这 样 的 应 用 依赖 。 我 们 要 把 react-native-linear-gradient 加 入 到 文件 末 
尾 的 依赖 列表 中 。 





例 7-6: AndroidDepends/android/app/build.gradle 


appLy plugin: 'com.android.application’' 


android { 
compileSdkVersion 23 
buildToolsVersion "23.0.1" 


defaultConfig { 
applicationId "com.androiddepends" 
minSdkVersion 16 
targetSdkVersion 22 
versionCode 1 
versionName "1.0" 
ndk { 
abiFilters "armeabi-v7a", "x86" 


} 
} 
buildTypes { 
release { 
minifyEnabled false 
proguardFiles getDefaultProguardFile('proguard-android.txt'), 
"proguard-ruLes.pro' 
} 
} 


} 


dependencies { 
compile fileTree(dir: 'libs', include: ['*.jar']) 
compile 'com.android.support:appcompat-v7:23.0.1" 
compile 'com.facebook.react:react-native:0.12.+' 
compile project(':react-native-linear-gradient') 


. 


最 后 ， 我 们 要 更 新 MainActivity.java 文件 ， 有 两 个 步骤 导入 LinearGradientPackage， 然 
后 添加 到 ReactInstanceManager 中 。 


你 可 以 添加 以 下 语句 到 文件 头 部 的 任意 位 置 ， 只 要 在 类 定义 之 前 即 可 。 








import com.BV.LinearGradient.LinearGradientPackage; 
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接着 ， 通 过 在 现 有 的 语句 之 后 添加 一 个 addPackage() 语句 ， 我 们 将 包 添 加 到 


ReactInstanceManager 里 。 


mReactInstanceManager = ReactInstanceManager .builder() 
.SetApplication(getApplication()) 
.SetBundleAssetName("index.android.bundle") 
.SetJSMainModuleName("index.android") 
.addPackage(new MainReactPackage()) 
.addPackage(new LinearGradientPackage()) // 添加 这 行 ! 
.SetUseDeveloperSupport(BuildConfig.DEBUG) 
.setInitialLifecycleState(LifecycleState.RESUMED) 
.build(); 


好 了 ! 这 个 步骤 完成 之 后 ， 我 们 可 以 在 JavaScript 中 导入 这 个 包 了 ， 代 码 如 下 : 


var LinearGradient = require('react-native-linear-gradient'); 


TT 





然后 可 以 在 React Native 中 使 用 这 个 组 件 : 


<LinearGradient colors={['#FFFFFF', '#00A8A8']} style={styles.container}> 
<Text style={styles.welcome}> 
A Lovely Gradient 
</Text> 
</LinearGradient> 





我 们 使 用 它 创 建 一 个 <Gradient> 组 件 ， 来 代替 默认 的 应 用 界面 ( 例 7-7)。 











例 7-7: AndroidDepends/gradient.js 


var React = require('react-native'); 
var { 
StyleSheet, 
Text 
} = React; 
var LinearGradient = require('react-native-linear-gradient'); 


var Gradient = React.createClass({ 
render: function() { 


return ( 
<LinearGradient colors={['#FFFFFF', '#00A8A8']} style={styles.container}> 


<Text style={styles.welcome}> 
A Lovely Gradient 
</Text> 
</LinearGradient> 


让 


var styles = StyleSheet.create({ 
container: { 
flex: 1， 
justifyContent: 'center', 
alignItems: 'center' 
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welcome: { 
fontSize: 20， 
textAlign: 'center', 
margin: 10， 
height: 50， 
padding: 20 

} 

]); 


module.exports = Gradient; 


这 就 是 使 用 <LinearGradient> 组 件 需要 做 的 所 有 工作 。 修 改 index.android.js 文件 来 演 染 一 
个 <Gradient> 组 件 ， 最 终 它 会 演 染 一 个 带 文本 的 渐变 ， 如 图 7-7 所 示 。 





[1@@@ 5554:galaxy 


ww 品 12:28 

















图 7-7: <Gradient> 组 件 
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太 酷 了 ! 既然 我 们 已 经 学 习 了 如 何在 Android 中 引入 一 个 第 三 方 模块 ， 那 我 们 再 创建 




















一 个 “Hello, World” 模 块 来 看 看 原生 模块 的 大 致 工作 原理 ， 但 这 次 我 们 使 用 Java 代替 
Objective-C。 最 后 ， 我 们 再 深入 剖析 一 下 react-native-linear-gradient 的 内 部 原理 。 





7.3.2 ”剖析 Java 原 生 模 块 
为 了 更 好 地 了 解 Java 原生 模块 的 工作 原理 ， 我 们 将 自己 动手 编写 一 个 。 就 像 Objective-C 
中 那样 ， 我 们 从 简单 的 “Hello, World” 模 块 开始 。 


























首先 ， 创 建 一 个 HelloWorld.java 文件 ( 例 7-8)。 记 住 ，Android 项 目 有 相当 深 的 幅 套 结构 。 
我 们 把 HelloWorld.java 和 MainActivity.java 放 在 同 级 目录 下 。 





例 7-8: AndroidDepends/android/app/src/main/java/com/androiddepends/ HelloWorld.java 


package com.androiddepends; 


import com.facebook . 
import com.facebook . 
import com.facebook . 
import com.facebook. 
import com.facebook. 


import android.util. 


react.bridge.NativeModule; 
react.bridge.ReactApplicationContext; 
react.bridge.ReactContext; 
react.bridge.ReactContextBaseJavaModule; 
react.bridge.ReactMethod; 


Log; 


public class HelloWorld extends ReactContextBaseJavaModule { 


public HelloWorld(ReactApplicationContext reactContext) { 
super(reactContext); 


} 


@Override 


public String getName() { 
return "HelloWorld"; 


} 


@ReactMethod 


public void greeting(String name) { 
Log.i("HelloWorld", "Hello, " + name); 


} 
} 


这 是 一 个 相当 不 错 的 模板 ! 让 我 们 一 步 步 来 学 习 。 


首先 ， 从 package 语句 开始 : 


package com.androiddepends; 





所 有 在 com.androiddepends 包 下 的 文件 都 必须 以 这 一 行 开头 。 出 于 方便 考虑 ， 我 们 使 用 与 
MainActivity.java 文件 相同 的 包 。 








134 | 第 7 章 





图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 


接着 导入 React Native 特定 的 文件 以 及 android.util.Log。 任 何 编写 的 模块 都 需要 导入 相同 
的 React Native 文件 。 














然后 定义 一 个 HelloWorld 类 。 它 是 公开 的 ， 这 意味 着 外 部 文件 可 以 使 用 它 。 并 且 它 继承 了 
ReactContextBaseJavaModule， 从 而 也 继承 了 ReactContextBaseJavaModule 中 的 方法 : 


public class HelloWorld extends ReactContextBaseJavaModule { ... } 
这 里 实现 了 三 个 方法 : HelloWorld、getName 和 greeting。 


在 Java 中 ， 与 类 名 名 称 相同 的 方法 称 作 构 造 方 法 。 因 此 ，HelloWorld 方法 有 点 像 模板 ;我 
们 只 需 调 用 super(reactContext) 方法 就 可 以 调用 ReactContextBaseJavaModule 的 构造 方 
法 ， 不 需要 额外 的 工作 。 











getName 决定 了 今后 我 们 将 在 JavaScript 里 使 用 什么 名 称 来 调用 这 个 模块 ， 因 此 需要 确保 
它 是 正确 的 ! 在 我 们 的 例子 中 ， 模 块 命名 为 “HelloWorld”。 注 意 ， 这 里 我 们 添加 了 一 个 
@override 注解 。 无 论 编写 什么 模块 ， 你 都 需要 实现 getName 方法 。 

















最 后 ，greeting 是 我 们 自己 的 方法 ， 我 们 希望 能 在 JavaScript 代码 中 调用 它 。 我 们 添加 
了 一 个 @ReactMethod 注解 ， 为 了 让 React Native 知道 这 个 方法 应 该 被 导出 。 为 了 在 调用 
greeting 方法 时 添加 日 志 ， 我 们 调用 了 Log.i， 操 作 如 下 : 





Log.i("HelloWorld", "Hello, " + name); 














Android 中 的 Log 对 象 提供 了 不 同 层 级 的 日 志 功 能 ， 其 中 三 个 最 常用 的 功能 是 : 消息 
(INFO)、 警 告 (WARN) 和 错误 (ERROR)， 它 们 各 自 通过 Log.i、 和 Log.e 方法 
进行 调用 。 每 个 方法 都 接收 两 个 参数 ， 一 个 是 日 志 的 标签 名 ， 另 一 个 是 日 志 信 息 。 标 准 
的 做 法 是 使 用 类 名 作为 标签 名 。 你 可 以 通过 Android A (http://developer. 
android.com/reference/android/util/Log.htm!l) 有 








我 们 还 需要 创建 一 个 包 文 件 来 包装 这 个 模块 〈 例 7-9)， 这 样 我 们 可 以 将 它 加 入 构建 过 程 
中 。 该 文件 也 应 该 与 HelloWorld.java 文件 处 于 同 级 目录 下 。 











例 7-9: AndroidDepends/android/app/src/main/java/com/androiddepends/ HelloWorldPackage.java 


package com.androiddepends; 


import com.facebook.react.ReactPackage; 

import com.facebook.react.bridge.JavaScriptModutLe; 

import com.facebook.react.bridge.NativeModule; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager .ViewManager; 


import java.util.ArrayList; 
import java.util.Collections; 
import java.util.List; 
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public class HelloWorldPackage implements ReactPackage { 
@Override 
public List<NativeModule> 
createNativeModules(ReactApplicationContext reactContext) { 
List<NativeModule> modules = new ArrayList<>(); 
modules.add(new HelloWorld(reactContext)); 
return modules; 


} 


public List<Class<? extends JavaScriptModule>> createJSModules() { 
return Collections.emptyList(); 


} 


public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 
return Collections.emptyList(); 
} 
} 


这 个 文件 基 人 我 们 不 需要 导入 HelloWorld， 因 为 它们 在 同一 个 
包 下 (com.androiddepends)。 这 里 有 三 个 方法 需要 注意: createNativeModules、 


createJSModules 和 createViewManagers。React Native 使 用 这 些 方法 来 决定 需要 导出 哪些 
模块 。 


在 这 里 我 们 只 是 编写 一 个 简单 的 所 谓 的 原生 模块 ， 因 此 后 两 个 方法 返回 了 一 个 空 的 列 
表 ， 而 createNativeModules 方法 返回 了 一 个 包含 HelloWorld 实例 的 列表 。 相 反 ， 如 果 查 
看 LinearGradientPackage.java 文件 (源码 : https://github.com/brentvatne/react-native-linear- 















































gradient/blob/master/android/src/main/java/com/BV/LinearGradient/LinearGradientPackage. 
java) ， 你 会 发 现 它 在 createViewManagers 方法 中 返回 了 一 个 LinearGradientManager 的 实 
例 ， 而 其 他 两 个 方法 返回 了 空 列表 。 


最 后 ， 我 们 需要 在 MainActivity.java 里 添加 包 ， 就 像 之 前 导入 LinearGradient 的 做 法 一 
样 。 导 入 包 文 件 : 














import com.androiddepends.HelloWorldPackage; 
接着 添加 HelloWorldPackage 到 ReactInstanceManager 中 : 


mReactInstanceManager = ReactInstanceManager .builder() 
.setApplication(getApplication()) 
.SetBundleAssetName("index.android.bundle") 
.SetJSMainModuleName("index.android") 
.addPackage(new MainReactPackage()) 
.addPackage(new LinearGradientPackage()) 
.addPackage(new HelloWorldPackage()) // <-- Add this line 
.SetUseDeveloperSupport(BuildConfig.DEBUG) 
.setInitialLifecycleState(LifecycleState.RESUMED) 
.build(); 
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就 像 Objective-C 模块 一 样 ， 我 们 也 是 通过 React.NativeModules 对 象 引 入 Java 模块 。 现 
在 ， 我 们 可 以 在 应 用 的 任何 地 方 调用 greeting() 方法 ， 就 像 这 样 : 











React.NativeModules.HelloWorld.greeting("Bonnie"); 


让 我 们 过 滤 日 志 来 查看 信息 。 在 项 目的 根 目 录 下 运行 命令 


adb logcat | grep HelloWorld 








| 




















我 们 查找 “HelloWorld” 实 例 ， 因 为 它 是 我 们 在 Log.i 里 使 用 的 标签 名 。 
在 终端 中 看 到 的 输出 内 容 。 


7-8 就 是 应 该 








10-11 14:01:45.081 2335 2369 I HelloWorld: Hello, Bonnie 
10-11 14:01:45.081 2335 2369 I HeLLowortLd: Hello, Bonnie 











图 7-8: logcat 的 输出 内 容 








既然 已 经 使 用 Java 编写 了 一 个 “Hello, World” 模 块 ， 那 我 们 再 看 一 个 更 复杂 的 例子 : 


react-native-linear-gradient。 











7.3.3 ”LinearGradient 的 Android 实 现 


<LinearGradient> 的 Android 实现 的 代码 在 android/ 目录 下 (https://github.com/brentvatne/ 
react-native-linear-gradient/tree/master/android)。 它 主要 包含 了 以 下 三 个 文件 : 


I 





。 LinearGradientPackage.java 
。 LinearGradientView.java 


。 LinearGradientManager.java 


LinearGradientPackage.java， 如 例 7-10 所 示 ， 看 起 来 跟 HelloWorldPackage.java 文件 非常 
相似 。 


例 7-10: LinearGradientPackage.java 


package com.BV.LinearGradient; 


import com.facebook.react.ReactPackage; 

import com.facebook.react.bridge.JavaScriptModule; 

import com.facebook.react.bridge.NativeModule; 

import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager .ViewManager; 


import java.util.ArrayList; 
import java.util.Collections; 


import java.util.List; 


public class LinearGradientPackage implements ReactPackage { 
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@Override 

public List<NativeModule> 

createNativeModules(ReactApplicationContext reactContext) { 
return Collections.emptyList(); 


} 


public List<Class<? extends JavaScriptModule>> createJSModules() { 
return Collections.emptyList(); 


} 


public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 
List<ViewManager> modules = new ArrayList<>(); 
modules.add(new LinearGradientManager()); 
return modules; 
} 
} 


主要 的 不 同 是 LinearGradientPackage 从 createViewManagers 方法 返回 了 LinearGradient- 
Manager 实例 ， 而 我 们 的 HelloWorldPackage 通过 createNativeModules 方法 返回 Hello- 
World 实例 。 








对 于 Android 而 言 ， 任 何 原生 演 染 的 视图 都 是 由 ViewManager 创建 和 控制 的 (或 者 更 具体 
来 说 ， 是 继承 了 ViewManager 的 类 )。 由 于 LinearGradient 是 一 个 UI 组 件 ， 我 们 要 返回 一 
个 ViewManager 实例 。React Native 文档 中 的 Android UI 组 件 部 分 (https://facebook.github. 
io/react-native/docs/native-components-android.html) 有 更 多 关于 暴露 原生 接口 ( 即 非 演 染 的 
Java 代码 ) 和 UI 组 件 的 区 别 的 内 容 。 























让 我 们 再 看 看 LtnearGradientManager。 这 是 一 个 相当 长 的 文件 ， 你 可 以 在 react-native- 
Linear-gradient 项 目的 GitHub 仓库 查看 完整 的 源码 (https://github.com/brentvatne/react- 
native-linear-gradient) 。 我 们 在 此 查看 一 个 缩 略 的 版 本 ; 








public class LinearGradientManager extends SimpleViewManager<FrameLayout> { 


public static final String REACT_CLASS = "BVLinearGradient"; 
public static final String PROP_COLORS = "colors"; 
public LinearGradientView mGradientView; 


@Override 

public String getName() { 
return REACT_CLASS; 

} 


Q@ReactProp(name=PROP_COLORS ) 
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public void updateCoLors(FrameLayout frame, ReadableArray coLors){ 


if(mGradientView != null) { 
mGradientView.updateColors(colors); 


} 


@Override 


public void updateView(FrameLayout frame, CatalystStylesDiffMap props) { 
BaseViewPropertyAppLicator .applyCommonViewProperties(frame, props); 


frame.removeAllViews(); 


mGradientView = new LinearGradientView(frame.getContext(), props); 


mGradientView.setId(View.generateViewId()); 


frame.addView(mGradientView); 


} 
} 


这 里 有 一 些 我 们 需要 注意 的 地 方 。 


首先 是 getName。 应 该 引起 注意 的 是 ， 就 像 我 们 的 HeLLowortLd 例子 一 档 
法 是 为 了 让 JavaScript 代码 可 以 引用 这 个 组 件 。 





FE， 实现 getName 方 


下 一 个 需要 注意 的 是 updateColors 方法 ， 以 及 @ReactProp 注解 的 使 用 。 这 里 ， 我 们 定义 
了 <LinearGradient> 组 件 接收 一 个 colors 属性 名 (因为 这 是 PROP_COLORS 的 值 )， 并 且 当 





属性 改变 时 ，updateColors 方法 会 被 调用 。 
否 存在 ， 如 果 存 在 ， 那 么 我 们 传 入 颜色， 这 样 它 就 可 以 被 更 新 了 。 


























在 updateColors 方法 中 ， 我 们 检查 基础 视图 是 














最 后 ， 在 updateView 中 ，LinearGradientManager 实际 上 处 理 视图 的 更 新 逻辑 ， 从 帧 布局 





中 移 除 已 存在 的 视图 ， 然 后 添加 一 个 





为 了 高 效 地 编写 Android 组 件 ， 你 需 





























要 了 解 Android 大 体 上 是 如 何 处 理 
他 React Native 组 件 源码 也 是 一 个 很 好 的 做 法 。 


7.4” 跨 平台 原生 模块 
编写 一 个 跨 平台 原生 模块 是 可 能 的 吗 ? 
答案 当然 是 “可 能 ”。 你 只 需要 分 别 为 每 











新 的 LinearGradientView 实例 到 帧 布局 中 。 





图 的 ， 但 查看 其 


个 平台 都 实现 一 个 模块 ， 然 后 对 外 提供 统一 的 


JavaScript 接口 即 可 。 这 个 方法 可 以 在 代码 复 用 最 大 化 的 前 提 下 很 好 地 解决 特定 平台 的 优 

















化 问题 。 

<LinearGradient> 组 件 就 是 一 个 很 好 的 例子 。 我 们 的 AndroidDepends 项 目 是 真正 跨 平 台 的 ， 

因为 <LinearGradient> 组 件 是 跨 平台 演 染 的 (即便 有 一 些 样 式 不 相同 )， 如 图 7-9 所 示 。 
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A Lovely Gradient 














图 7-9: <Gradient> 组 件 ，Android ( 左 ) 和 iOS ( 右 ) 


创建 一 个 跨 平 台 原生 组 件 是 如 此 便捷 ， 并 且 不 需要 太 多 额外 的 配置 。 一 旦 分 别 实现 了 iOS 
和 Android 版 本 ， 就 只 需要 创建 一 个 包含 index.ios.js 和 index.android.js 文件 的 目录 即 可 。 
每 一 个 版 本 都 需要 导入 正确 的 模块 。 然 后 你 就 可 以 直接 引入 这 个 目录 ，React Native 会 自 
动 选择 平台 对 应 的 版 本 。 


例如 ，react-native-linear-gradient/ 目录 (在 node_modules/ 目录 下 ， 它 是 通过 npm 安装 的 ) 
下 包含 一 个 index.ios.js 和 一 个 index.android.js 文件 。React Native 将 会 为 我 们 选择 一 个 正 
确 的 文件 ， 我 们 只 需要 像 这 样 导入 react-native-linear-gradient/ 即 可 : 


var LinearGradient = require('react-native-linear-gradient'); 





按照 目前 的 情况 ，React Native Bas iOS 和 Android 版 本 之 间 保 持 接口 的 一 致 性 ， 因 此 
这 是 你 需要 考虑 的 事情 。 如 果 你 希望 i0S 和 Android 版 本 在 接口 上 有 一 些 细微 的 区 别 ， 当 
然 也 是 可 以 的 ! 
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7.5 “小 结 


何 时 适合 使 用 原生 的 Objective-C 或 Java 代码 ? 何 时 适合 引入 第 三 方 模块 或 类 库 ? 总 体 而 
言 ， 原 生 模 块 有 三 个 使 用 场景 : 利用 现 有 的 Objective-C 或 Java 代码 ， 编写 像 图 形 处 理 这 
样 高 性 能 或 多 线程 的 代码 ， 暴 露 React Native 中 未 支持 的 接口 。 

















对 于 现 有 的 Objective-C 或 Java 项 目 来 说 ， 编 写 原生 模块 是 一 个 在 React Native 中 复 用 现 有 
代码 的 很 好 的 做 法 。 混 合 型 应 用 有 些 超出 本 书 范围 ， 但 它 确实 是 一 种 切实 可 行 的 办 法 ， 并 
且 你 可 以 使 用 原生 模块 在 JavaScript、Objective-C 和 Java 中 共享 功能 代码 。 
类 似 地 ， 对 于 一 些 注重 性 能 或 执行 特定 任务 的 场景 来 说 ， 使 用 对 应 平台 的 原生 语言 进行 开 
发 是 明智 的 做 法 。 在 这 些 场景 下 ， 让 Objective-C 或 Java 执行 一 些 繁重 的 “体力 活 ”， 然 后 
把 结果 传 回 给 JavaScript 应 用 的 做 法 更 加 切实 可 行 。 















































最 终 ， 你 难免 遇 到 需要 使 用 但 React Native 尚未 支持 的 平台 接口 。React Native 还 处 于 开 
发 阶段 ， 因 此 对 特定 平台 的 支持 基本 将 长 期 处 于 有 待 完 善 的 状况 。 在 这 种 情况 下 ， 你 有 两 
种 解决 方案 : 一 种 是 转向 社区 ， 寻 找 是 否 有 人 已 经 解决 了 你 的 问题 ， 另 一 种 则 是 自己 来 解 
决 ， 顺 利 解决 了 之 后 还 可 以 把 方案 贡献 给 社区 ! 能 够 自己 编写 原生 模块 ， 意 味 着 你 不 需要 
依赖 React Native 核心 团队 就 可 以 利用 宿主 平台 了 。 


























即使 你 之 前 没有 原生 iOS 或 Android 的 开发 经 验 ， 如 果 你 计划 使 用 React Native 进行 开发 ， 
尝试 阅读 Objective-C 或 Java 代码 是 一 个 不 错 的 主意 。 自 己 动手 尝试 并 解决 问题 的 能 力 是 
无 价 的 ， 日 后 在 使 用 React Native 时 万 一 遇 到 困难 也 不 会 手足 无 措 ， 并 且 原 生 模 块 的 开发 
难度 实际 上 相当 平缓 。 不 用 担心 ， 去 试 试 吧 ! 

















当 你 开发 自己 的 React Native 应 用 时 ，React Native 社区 以 及 JavaScript 完善 的 生态 环境 将 
会 给 你 提供 宝贵 的 资源 。 你 可 以 在 别人 的 模块 的 基础 上 进行 开发 ， 如 果 需 要 帮助 的 话 ， 不 
妨 联系 他 们 吧 ! 
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调试 与 开发 者 工具 





当 你 开发 自己 的 应 用 时 ， 可 能 会 遇 到 一 些 问 题 。 当 需要 调试 应 用 的 时 候 ， 我 们 庆幸 地 发 
现 已 经 有 一 些 React Native 的 专用 工具 了 ， 它 们 可 以 帮助 我 们 更 轻松 地 完成 工作 。React 
Native 和 宿主 平台 的 交互 层 可 能 会 出 现 一 些 糟糕 的 bug， 本 章 也 会 介绍 这 部 分 内 容 。 我 们 
还 将 了 解 React Native 开发 中 的 一 些 常见 的 陷阱 ， 以 及 一 些 用 来 解决 这 些 问题 的 工具 。 不 
涉及 测试 内 容 的 调试 讲解 都 是 不 完整 的 ， 因 此 我 们 也 会 介绍 一 些 React Native 代码 自动 化 
测试 的 内 容 。 


8.1 JavaScript 调试 实践 和 解释 


当 使 用 Web 平台 上 的 React 时 ， 我 们 拥有 大 量 基于 JavaScript 的 通用 的 技术 和 工具 来 帮 
助 我 们 调试 应 用 。 它 们 中 的 大 多 数 也 适用 于 React Native， 但 有 时 需要 一 些微 小 的 改动 。 
React Native 允许 我 们 使 用 熟悉 的 控制 台 、 调 试 器 和 React 开发 者 工具 ， 因 此 调试 React 
Native 中 的 JavaScript 问题 应 该 会 让 你 感觉 很 熟悉 。 




















8.1.1 激活 开发 者 选项 

为 了 让 自己 使 用 这 些 工 具 ， 你 需要 在 应 用 内 的 开发 者 菜单 中 启用 Chrome 开发 者 工具 ( 
8-1)。 这 个 菜单 可 以 在 iOS 模拟 器 中 通过 快捷 键 Command+Control+Z 来 触发 ， 也 可 以 通过 
按 下 Android 的 硬件 按钮 或 摇晃 设备 来 触发 。 你 可 以 在 菜单 中 选择 Debug in Chrome 来 局 
动 Chrome 开发 者 工具 。 





/| 
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Reload JS 
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React Native: Development 


Dev Settings Reload 


Debug in Chrome 
Inspect Element 


Debug in Safari 
Show FPS Monitor 


Inspect Element 


Cancel 











图 8-1: 应 用 内 置 的 开发 者 菜单 ，Android ( 左 ) 和 iOS ( 右 ) 视图 


8.1.2 ”使 用 consotLe.tLog 调 试 
最 基础 也 是 最 常用 的 调试 方法 之 一 就 是 先 输出 ， 然 后 观察 发 上 生 了 什么 。 对 于 大 多 数 Web 开 
发 者 而 言 ， 在 代码 中 添加 console.1og 是 工作 流程 中 的 一 个 潜在 环节 。 











JavaScript 控制 台 直 接 在 React Native 之 外 工作 。 使 用 输出 语句 不 需要 任何 特殊 的 配置 。 





使 用 Xcode 时 ， 你 会 看 到 与 Xcode 控制 台 相 同 的 输出 内 容 (图 8-2)。 注 意 ， 你 可 以 通过 调 
整 Xcode 可 视 面 板 来 扩大 控制 台 的 空间 。 
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多 Xcode File Edit View Find Navigate Editor Product Debug SourceControl Window Hep 们 美 灸 四 串 合 加 9%% 轩 Mon1l:00PM QQ 








站 导读 Pp 图 四 zebro) 画 iPhonee Running Zebroto on iPhone 6 1 
归 DB Zebreto ,站 Zobreto ) ma main.m ) No Selection pS 
7 


* Copyright (c) 2015-present, Facebook, Inc, 
* ALL rights reserved 

* This source code is licensed under the BSD-style license found in the 

* LICENSE file in the root directory of this source tree. An additional grant 
* of patent rights can be found in the PATENTS file in the same directory, 

#/ 


Fimport <UIKIt/UIKIt.h> 
#inport "AppDelegate.h" 
int main(int argc, char * argv[]) { 


@autoreteasepoof 
return UIApplicationMain(arge, argv, nil, NsstringFronClass( [AppDetegate class])); 


加 公车 | 由 |7 Zebreto 
2015-09-14 







‘initialProps":{}}. _DEV_ === true, developnent-level warning are 





‘Running application "Zebro" with appParans: f"rootTag' 
tt 







cebook -React Javascript] ‘I\'m a console star 
book -React ,JavaScript] ‘I\'m a console s 
cebook. React JavaScript] 'I\'m a console si 





,542 [info] [tidicom， 





Al Output $ 














8-2: Xcode 中 的 控制 台 输 出 


与 此 相似 ， 对 于 Android 而 言 ， 你 可 以 在 项 目 根 目录 运行 logcat 命令 来 查看 设备 的 日 志 
(图 8-3)。 











adb logcat 





10-11 20:12:190.139 2070 2085 E Surface : getSlotFronBufferLocked: unknown buffer: 6xab751760 

10-11 20:12:19.368 1282 1361 W AppOps : Finishing op nesting under-run: uid 10058 pkg com.androiddepends code 24 tine=0 duration=0 nesting=0 
10-11 20:12:10.440 2070 2164 W ReactNativeJS: “Warning: Native component for "RCTModalHostView" does not exist' 
10-11 20:12:19.528 2070 2104 D ReactNative]S: 'Running application "AndroidDepends" with appparams: {"initialprops": 
opment-Levet warning are ON, performance optimizations are OFF' 

10-11 20:12:10.529 1282 1293 W InputMethodManagerService: Window already focused, ignoring focus gain of: com.android.internal.view.IInputMethodClient$Stub$ 
Proxy@c707531 attribute=null, token = android.os,BinderProxy@e1l4a28e 

10-11 20:12:10.542 2070 2104 D ReactNative]S: 'CONSOLE.LOG IN LOGCAT' 





true, devel 





},"rootTag":1}. _DEV__ 











8-3: logcat 中 标签 名 为 “ReactNativeJS” 的 控制 台 输出 








然而 ， 这 些 视图 杂乱 无 章 ， 还 夹杂 着 一 些 平台 相关 的 内 容 。 我 们 可 以 直接 使 用 基于 浏览 器 
的 开发 者 工具 。 激 活 开发 者 菜单 并 选择 Debug in Chrome， 然 后 打开 你 的 控制 台 。 如 图 8-4 
所 示 ， 你 可 以 从 Chrome 开发 者 工具 的 控制 台中 看 到 输出 的 内 容 。 




















DY Porsonal 
CD localhost:8081/debugger-ui Ys OZ“ 围 久 
洋 Apps Tasoldoe 从 effxee [conzo15BonnieE 四 Enidea_vourube 


React Native JS code runs inside this Chrome tab 
Press to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. 


Status: Debugger session #10010 active 


Q 日 | Elements Network Sources Timeline Profiles Resources Audits Console| React -| 这 号 | x 
© F <topframe> v DPreseve log 
Running apptication "Zebro” with appparans: {"rootTag":1,"initialprops":{)}. DEV_ ~— true, developnent-level varning are ON, performance optinizations are OFF 





OI'n a console statenent! 
> 








8-4: Chrome 控制 台 输 出 
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注意 ， 你 需要 先 打 开 控 制 台 才 可 以 看 到 输出 内 容 。 


这 个 功能 是 怎样 工作 的 呢 ? 当 你 加 载 了 开局 Chrome 调试 工具 的 React Native 应 用 之 后 ， 
Google 的 Chrome 浏览 器 便 会 通过 React Native 包 管 理 器 使 用 一 个 标准 的 <script> 标签 来 
执行 相同 的 JavaScript 代码 ， 因 此 你 可 以 拥有 一 个 基于 浏览 器 的 调试 器 。 随 后 ， 包 管理 器 
使 用 WebSocket 进行 设备 与 浏览 器 之 间 的 通信 。 




















我 们 不 需要 过 多 关注 具体 的 细 方 ， 只 需要 知道 如 何 使 用 这 些 工具 就 行 了 |! 


8.1.3 ”使 用 JavaScript 调 试 器 

同时 ， 你 也 可 以 使 用 JavaScript 调试 器 ， 就 像 在 开发 Web 平台 上 的 React 一 样 。 在 Chrome 
浏览 器 打开 开发 者 工具 ， 切 换 至 source 选项 ， 然 后 在 断 点 处 调试 器 会 被 激活 。 你 可 以 在 图 
8-5 查看 这 些 步骤 。 











©@ heactNatveDebuoger x Personal | 
次 器 @ 人 J 国人 = 





司 CC 口 Iocalhost8081/debuggerui 





Apps | ascidoc 衣 afxes | | !con2015BonnieE (BD Evildea- Yourube 





Paused in debugger ly AY 











Q 0D | Fements Network JSources| Timeline Profiles Resources Audits Console React 汪 | 桨 吕 | x 
Sources Content scripts Snippets |[[] debugger-ui Cardsstorejs DeckCreationjs indexjs Reviewstorejs index.ios.js x ra? 
* © (no domain) 中 了 D; eh 
v © localhost:8081 48 vyWatchi & 
* Users/bonnie/Irn-code/Zebro| 49 goHome() { 
59 this,refs,navigator,popToTap(); Y Call Stack 
国 RunMainModulejs 引 有 
debugger-ui 52 Zebreto rend 
国 indexios-bundle et 
55 mponentjs:715 
56 ReactComposi 
人 teComponent 
a 
59 
69 ValidatedCom 
61 ponentWithou 
62 tOwnerOrCont 
63 xt 
64 Case 'review'; 
65 return <Review quit=fthis,goHomey {... route.data} />; rind 
66 default: ReactComposi 
67 consote.error('Encountered unexpected route: ' + route.nane); teComponent 
68 } Mixin._render 
习 return <Decks/>; ValidatedCom 
| “ ponent 
72 render() { ReactPerfjs:70 
73 console. log("I'm a console statement!"); ReactComposi 
EA denuog: teComponent 
76| “<view style={styles.container}> endervalid 




















图 8-5: 使 用 调试 器 

值得 一 提 的 是 ， 类 似 于 JavaScript 控制 台 ， 如 果 设 有 预先 打开 开发 者 工具 面板 ， 那 么 调试 
器 可 能 不 会 在 断 点 处 被 激活 。 同 样 ， 如 果 没 有 启用 Chrome 的 调试 功能 ， 那 么 调试 器 也 不 
使 用 调试 器 ， 你 就 可 以 直接 在 Chrome 上 查看 跟 平时 一 样 形式 的 源 代 码 。 同 时 ， 也 可 以 使 
用 浏览 器 内 置 的 控制 台 (console) 与 当前 的 JavaScript 上 下 文 进行 交互 。 
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8.1.4 使 用 React 开 发 者 工具 


开发 Web 平台 上 的 React 时 ，React 开发 者 工具 是 非常 实用 的 。 它 允许 你 审查 组 件 的 层次 
结构 ， 以 及 检查 组 件 状态 和 属性 ， 还 可 以 直接 在 浏览 器 中 修改 状态 。React 开发 者 工具 可 
以 在 Chrome 扩展 中 心 找到 (https://chrome.google.com/webstore/detail/react-developer-tools/ 
fmkadmapgofadopljbjfkapdkoienihi) 。 





React Native 也 可 以 使 用 React 开发 者 工具 ， 但 体验 可 能 有 些 不 同 。 打 开 开 发 者 工具 之 后 ， 
为 了 让 “桥接 ”生效 ， 和 暂时 需要 跟 应 用 进行 交互 〈 在 屏幕 上 轻 触 即 可 )， 如 图 8-6 和 图 8-7 
所 示 。 









































CD localhost:8081/debugger-ui 六 四 介 丸 图 三 
iPhone 6 -iPhone 6/ 108 9.0(... 
Ei . Garer B27 PM > 
React Native JS code runs inside this Chrome tab. 
Press to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. 
Status; Debugger session #10000 active. 
Q Elements Network Sources Timeline Profiles Resources Audits Console |iReactill x 
Connecting to React... 
tfthis is Roact Native you nood to intoract with tho app (ust tap tho scroon) in ordor to ostablish tho bridge. 
图 8-6: 开发 者 工具 启动 之 前 的 画面 (需要 在 屏幕 上 轻 触 ) 
Q | Elements Network Sources Timeline Profiles Resources Audits Console JReact| > 阁 口 x 
v <AppContainer rootTag=1> <TextInput> ($r in the console) 
v <View style=90> Props 
me ea a onSubmitEditing; bound setInContext() 
* <RCTView collapsible=false style=98> ~ style: Array[2] 
v <WeatherProject rootTag=1> 
v <Vievw style=93> State 


v <RCTView style=93> 
vv <Image source={_ packager_asset: true，isStatic; true, path: "/Users/bonnie/Lrn-code/WeatherProject/android/app/-"，.-} resizeMode="co 
* <RCTImageView source={_ packager_asset: true, isstatic: true, path: "/Users/bonnie/\rn-code/Weatherproject/android/app/~", ~} resizl| Context Empty object 
<View style=95> 
" <RCTView style=95> , 
v <View style=96> React Native Style Editor 
7 <RCTView style=96> 
v <Text style=99 allowFontScaling=t rue> 


mostRecentEventCount: 0 


+ <RCTText style=99 allowFontScaling=true accessible=true.> es 让 
"Current weather for" height :16 
</RCTText> 
</Text> flex 曙 
<View style=97> 
”<RCTView style=97> fontSize A 
v <TextInput style=[98,99] onSubmitEditing=bound setInContext()> olor :4FFFFFF 
* <TouchabteWithoutFeedback onPress=bound setInContext() rejectResponderTernination=true>-</TouchabtewithoutFeedback> 
</TextInput> borderColor :red 
</RCTView> 
</View> borderwidtn :10 
</RCTView> 
</View> 
</RCTView> 
</View> 
</RCTInageView> 
</Inage> 


</RCTView> 





AppContainer View ReMiew View RCTView Weatherproject View RCTView Inage RCTImageView \iew RCTView View RCTView View RCTView 


Search by Component Name 














图 8-7: 使 用 React 开发 者 工具 查看 组 件 和 属性 
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这 些 工具 在 React Native 中 有 一 些 限 制 。React Native 专用 的 开发 者 工具 还 处 于 开发 阶段 ， 
目前 尚未 完整 支持 所 有 的 功能 ， 例 如 在 检查 器 中 修改 样式 的 功能 还 不 大 完 童 








uy 








卫 





另 一 个 值得 注意 的 地 方 是 ， 许 多 组 件 缺少 displayName。 你 通常 可 在 Web 平台 的 React 中 
隐 式 地 设置 组 件 的 displayName ， 就 像 这 样 : 

















import React from 'react'; 
var ComponentName = React.createClass({ 


和 


export default ComponentName; 





如 果 这 样 定 义 了 一 个 组 件 ， 那 么 当 你 使 用 React 开发 者 工具 审查 元 素 时 ， 会 发 现 它们 显示 
了 对 应 的 名 称 。 由 于 React Native 的 这 一 功能 有 人 缺陷， 你 需要 显 式 地 设置 dispLayName: 























import React from 'react-native'; 
var ComponentName = React.createClass({ 
displayName: "ComponentName 


D; 


export default ComponentName; 





依 此 设置 之 后 ，React 开发 者 工具 就 可 以 正常 地 解析 带 有 标签 的 组 件 层 次 结构 。 


8.2 ”React Native 调 试 工具 


除了 基于 JavaScript 的 Web 基础 调试 工具 之 外 ， 还 有 一 些 调试 功能 是 针对 React Native 的 。 








8.2.1 使 用 审查 元 素 功 能 

在 浏览 器 上 使 用 React 开发 者 工具 时 ， 你 会 发 现 “ 审 查 元 素 ” 功 能 还 有 一 些 待 改 进 的 地 方 。 
不 过 应 用 内 的 “审查 元 素 ” 的 功能 可 能 会 对 你 有 所 帮助 ， 它 支持 查看 样式 等 信息 ， 还 为 你 
提供 了 一 种 快捷 的 挖掘 组 件 层级 的 功能 。 如 图 8-8 所 示 ， 你 可 以 查看 按钮 组 件 的 审查 结果 。 
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Carrier 令 9:05 AM [L 


ZEBRETO 


die Frau 


Stop Reviewing 


Zebreto »* * Review * ViewCard ET 
0 


0 
(10, 162) 
355 x 53 

0 


0 


#FFFFFF 0 0 (oe) 


Inspect Perf 














图 8-8: 使 用 审查 元 素 功能 ， 点 击 组 件 查看 更 多 信息 
这 个 视图 同时 也 展示 了 一 些 基 本 的 性 能 指标 。 





8.2.2” 宕 机 红 屏 

在 应 用 开发 过 程 中 最 常见 的 场景 之 一 就 是 宕 机 红 屏 了。 错误 界面 虽然 让 人 惊 懂 ， 但 实际 上 
是 非常 好 用 的 : 它 捕 获 错误 并 解析 成 有 意义 的 信息 。 同 样 ， 学 会 理解 它 显示 的 错误 信息 也 
有 助 于 提高 开发 效率 。 














出 如 图 8-9 所 示 的 信息 ， 它 指出 了 错误 所 在 的 文件 和 行 号 。 





例如 ， 一 个 语法 错误 会 


二 





148 | 第 8 章 
图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 





SyntaxError /Users/bonnie/Irn-code/Zebro/ 
src/components/NormalText.js: Unexpected 
token (17:2) 


/Users/bonnie/Lrn-= code/Zebro/s Fe 
A AN 


Users nnie/ lrn-code/Ze...0 














图 8-9: 语法 错误 的 宕 机 红 屏 


另 一 个 常见 的 错误 是 尝试 使 用 一 个 未 导入 或 未 定义 的 变量 。 例 如 ， 不 明确 地 导入 <Text> 组 


件 ， 像 这 样 : 


tt 





import React from 'react-native'; 


export default React.createClass({ 
render() { 
return ( 
<View> 
<Text> 
I haven't required things properly! 
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这 会 引发 如 图 8-10 所 示 的 错误 信息 。 





You are trying to render the global Text 
variable as a React element. You probably 
forgot to require Text. 


goa Van toma Se on 


/bonnie 


ober bl Obs 


/bonnie 


eaes lean 
Use /bonnie 


Seles lan 
Use /bonnie 


Pomme la ren 
Users/bonnile 


_renderValidatedComponentWithoutOwnerOrC 


Ge 
sers/Vbonnie/Lrn-code/ze..tCompositeComponent .js:715 


hn la are on onent 
Users/bonnie/Lrn-code/ze..tCompositeComponent ,js:737 


ReactCompositeComponent__renderValidated 


omponent 
U / bonnie 


mountComponent 
Users/bonnie/Lrn= ze..tCompositeComponen 


人 Wout 
/bonnie Nn ( S Me 














图 8-10: 忘记 导入 <Text> 组 件 而 引发 的 错误 
尝试 使 用 一 个 未 定义 的 变量 也 会 引发 错误 (图 8-11)。 
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Can't find variable: View 


2 render 


Lrn 


bonnle/ lrn-coae 


了 SSG dateo 


onn1le rn—c 


ReactCompositeComponent__renderValidated 


ES ne 
ers/bonnie/Lrn-code/Ze...s/SrcVtest 


RD 
nn Lrn-c 


Feact ompos itec onponcnt Do 
[ns rn de/Ze.. 2 


mount omponent 
2 NN1e Finett 


MRI 
nnlie rn=CO0/Lesm Le 


De 
Users/bonnie/\rn Ze..Nat 


mon onpone nt 
> nnlie/ Lrn [ole 


Mon omponent 
y yA: Lrn 











图 8-11: 尝试 使 用 未 定义 的 变量 的 错误 信息 





样式 相关 的 错误 有 一 些 特定 的 信息 。 举 例 而 言 


， 如 果 调 用 StyleSheet.create 方法 并 传 入 


了 一 个 无 效 的 值 ， 那 么 React Native 将 会 告诉 你 哪些 值 才 是 有 效 的 (图 8-12)。 
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Invariant Violation: Invalid prop ‘fontWeight of 
‘oops supplied to ‘StyleSheet normal, 
expected one of 
["normal","bold","100","200","300","400","500 
","600","700","800","900"]. 
StyleSheet normal: { 

"fontSize": 24, 

"fontFamily": "Avenir Medium", 

"fontWeight": "oops" 


value 


} 


eo 

voi aty ee nop 
sers/bonnie/lrn-code/Ze..st) 

SA 

Se ae 


<unknown> 


require 
USers/Donn1le 


<unknown> 
ers/bonnie 


require 








nnie/Lrn-code/zZe..StyLeSheetValLida 


Donnl rn-co 


bonn1le 


bonnle 








图 8-12: 误 设 样式 属性 的 错误 信息 


和 宕 机 红 屏 看 起 来 可 能 有 点 吓人 ， 但 确实 对 你 有 所 帮助 ， 并 且 它 展示 的 错误 信息 都 是 很 有 
用 的 。 如 果 由 于 某 些 原因 需要 退出 错误 界面 ， 只 需要 在 模拟 器 上 按 下 “退出 键 ”(Escape 








Key) 就 可 以 切换 回应 用 界 盏 








可 








8.3 ” JavaScript 之 外 的 调试 方法 

由 于 使 用 React Native 编写 移动 应 用 ， 你 遇 到 的 错误 可 能 不 仅仅 存在 于 React 代码 里 ， 也 
可 能 出 现在 应 用 内 部 。 如 果 你 是 移动 开发 的 新 手 ， 这 些 问 题 可 能 会 让 人 诅 去 。 此 外 ， 有 
时 候 你 会 遇 到 一 些 因 JavaScript 代码 与 宿主 平台 交互 而 产生 的 错综复杂 的 问题 和 错误 ， 而 
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React Native 和 宿主 平台 代码 的 混合 会 产生 一 些 莫名 其 妙 的 “症状 "。 


学 习 调试 纯 JavaScript 代码 之 外 的 问题 对 使 用 React Native 进行 高 效率 开发 来 说 是 非常 重要 
的 。 值 得 庆幸 的 是 ， 很 多 问题 都 比 想象 中 容易 解决 ， 而 且 还 有 大 量 的 工具 可 以 帮助 我 们 。 





8.3.1 常见 的 开发 环境 问题 


React Native 更 新 得 非常 快 ， 这 意味 着 管理 你 的 开发 环境 可 能 会 有 点 令 人 恬 恼 。 





如 果 你 遇 到 由 于 包 管 理 器 的 启动 ， 或 者 由 于 使 用 npm start 或 react-nattive run-android 
构建 或 运行 应 用 而 产生 的 错误 ， 那 么 很 可 能 是 依赖 的 问题 。 





如 果 你 使 用 brew 管理 依赖 ， 那 么 推荐 保持 brew 在 最 新 状态 : 





brew update 
brew upgrade 


如 果 已 经 升级 了 React Native， 那 么 推荐 运行 这 些 命令 升级 你 的 node: 
brew upgrade node 
此 外 ， 你 也 可 以 运行 brew doctor 来 检查 已 安装 的 包 是 否 存在 问题 。 


如 果 你 的 依赖 出 现 问 题 ， 另 一 种 常用 的 解决 办 法 是 清理 所 有 已 安装 的 npm 包 ， 然 后 重新 
安装 : 


rm -rf node_modules 
npm install 


8.3.2 ”常见 的 Xcode 问题 


当 你 构建 1OS 应 用 时 ， 可 能 会 遇 到 一 些 错误 ， 它 们 会 出 现在 Xcode 的 问题 面板 里 (图 
8-13)。 你 可 以 通过 选择 警告 图 标 来 查看 错误 。 


























备 ” Xcode File Edit View Find Navigate 
@ @ 向 图 @@ zebro ) 世 iPhone 6 
Ss 


By File By Type Show the lssue navigator 

















图 8-13: 查看 错误 面板 
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接着 ，Xcode 会 为 你 指出 相关 的 文件 和 行 号 ， 在 IDE 里 高 亮 显示 这 些 问 题 。 图 8-14 展示 了 
一 个 常见 错误 的 例子 。 





// jsCodeLocation = [INSBundte mainBundte] URLForResource:@"main" withExtension:@"jsbundle"]; 


9 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 
moduleName:@"Zebro'" © Novisible @interiace for "RCTRootView' declares the selector initWithBundleURL:moduleName:launchOptions' 
launchOptions: launchOptions]; 











8-14: 接口 错误 


No visible interface for“RCTRootView” 说 明 React Native 的 类 由 于 某 些 原因 对 Xcode 来 说 
是 不 可 见 的 。 通 常 ， 如 果 你 在 Xcode 里 碰 到 X is undefined 这 样 的 问题 ， 并 且 X 是 以 RCT 
为 前 级 或 是 React Native 的 一 部 分 文件 ， 那 么 建议 你 检查 包 管 理 器 ， 确 保 JavaScript 的 依赖 
处 于 良好 状态 中 : 


(1) 退出 包 管理 器 ， 

(2) 退出 Xcode; 

(3) 在 项 目 目录 下 运行 npm install; 
(4) 重新 打开 Xcode; 

















lA 














另 一 个 常见 的 是 资源 尺寸 的 问题 (如 图 8-15 所 示 )。 














名 Xcode File Edit View Find Navigate 

Oe@® > 国 ”人 @ Zebro ) 入 iPhone6 
王 /OS 

By Type 


Zebreto 
@ 1issue 
v | Images.xcassets 
A Asset Catalog Compiler Warning 
Launchlmage.launchimage/zebro_splash@2x-5.png is 
750x1334 but should be 2208x1242. 














8-15: 有 关 图 像 尺寸 问题 的 警告 


资源 文件 需要 符合 目标 平台 的 尺寸 要 求 (尤其 是 应 用 的 图 标 文件 )， 如 果 你 导入 了 一 个 错 
误 的 尺寸 ， 那 么 Xcode 将 会 抛 出 一 个 警告 。 



































要 弄 懂 Xcode 的 警告 可 能 需要 一 些 时 间 ， 尤 其 当 你 对 Objective-C 不 熟悉 时 。 其 中 最 环 手 
的 是 关于 React Native 与 Xcode 项 目 整合 的 问题 ， 但 通过 清理 并 重新 安装 React Native 通 
常 能 够 得 到 解决 。 


























8.3.3 常见 的 Android 问 题 


当 你 运行 react-native run-androtd 时 ， 可 能 会 出 现 一 些 错误 ， 阻 止 你 加 载 应 用 。 





大 
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最 常见 的 两 个 问题 一 般 是 Android 依赖 的 丢失 ， 以 及 未 能 启动 Android 虚拟 设备 (或 通过 
USB 连接 的 可 识别 的 设备 ) 。 


如 有 果 你 遇 到 一 个 关于 包 丢 失 的 警告 ， 可 通过 运行 android 来 查看 该 包 是 否 被 列 为 “已 
安装 ”。 如 果 没 有 的 话 ， 那 就 安装 它 。 如 果 已 经 安装 了 ， 但 React Native 无 法 找到 的 话 ， 
那么 可 以 按照 上 面 的 步骤 尝试 去 修复 开发 环境 问题 。 同 时 ， 你 也 应 该 检查 一 下 ， 确 保 
ANDROID_HOME 环境 变量 已 经 被 正确 设置 并 指向 了 Android SDK 的 安装 目录 。 例 如 ， 在 我 
的 系统 上 有 : 

















$ echo $ANDROID_HOME 
/usr/local/opt/android-sdk 


如 果 你 遇 到 一 个 关于 指定 了 不 可 识别 设备 作为 构建 目标 的 问题 ， 那 就 需要 检查 你 的 设备 。 
你 是 打算 在 模拟 器 上 运行 应 用 吗 ? 如 果 是 的 话 ， 运 行 android avd， 然 后 启动 一 个 合适 的 
模拟 器 。 如 果 模 拟 器 仍 处 在 启动 过 程 ，react-native run-android 命令 会 执行 失败 ， 可 以 
等 待 儿 分 钟 再 重 试 。 如 果 你 打算 使 用 物理 设备 ， 请 确保 USB 调试 选项 已 被 激活 。 














创建 签名 版 本 的 Android 应 用 之 后 ， 可 能 还 会 遇 到 一 些 问题 ， 第 11 章 将 会 讨论 这 部 分 内 容 : 
$./gradlew instaLLReLease 


INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES : 
New package has a different signature 


这 个 问题 可 以 通过 在 设备 或 模拟 器 上 鲁 载 旧版 本 应 用 来 解决 ， 也 可 以 重 试 安装 步骤 。 它 是 
由 于 尝试 使 用 一 个 不 同 的 签名 密 钥 来 安装 应 用 而 导致 的 一 一 这 当然 会 在 你 生成 第 一 个 签名 
版 APK 之 后 发 生 。 











8.3.4 React Native 包 管理 器 


React Native 依赖 于 包 管 理 器 来 重新 构建 代码 ， 因 此 包 管 理 器 的 异常 会 很 快 以 错误 的 形式 
展现 出 来 。 























当 你 从 Xcode 或 使 用 react-native run-android 命令 运 和 


项 目 时 ，React Native 包 管 理 器 
会 自动 加 载 。 但 在 关闭 项 目的 时 候 ， 它 并 不 会 自动 退出 。 这 意味 着 ， 如 果 你 切换 了 项 目 ， 
那么 包 管 理 器 仍 在 运行 ， 只 不 过 运行 在 错误 的 目录 下 ， 因 此 代码 会 编译 失败 。 所 以 请 确保 
包 管 理 器 永远 运行 在 项 目 对 应 的 根 目 录 下 。 你 可 以 通过 npm start 命令 来 启动 它 。 

















如 果 React Native 包 管 理 器 在 启动 时 抛 出 了 一 些 奇怪 的 错误 ， 那 么 很 可 能 是 你 的 开发 环 
境 处 于 不 良 的 状态 。 我 们 可 以 根据 之 前 描述 的 步骤 来 解决 这 个 问题 ， 确 保 npm、node 和 
react-native 的 本 地 文件 处 在 良好 的 状态 。 
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8.3.5 部署 至 iOS 设 备 的 问题 
当 你 尝试 在 真实 的 iOS 设备 上 测试 应 用 时 ， 可 能 会 遇 到 一 些 奇怪 的 问题 


如 果 在 上 传 应 用 到 iOS 设备 的 过 程 中 遇 到 有 麻烦， 你 要 做 的 第 一 件 事情 就 是 检查 是 否 正 确 
设 ， 了 Apple 开发 者 账号 。 打 开 iTunes Connect 网 站 (http://itunesconnect.apple.com/) 

行 检查 ， 接 受 所 有 未 决定 的 协议 。 如 果 没 有 Apple 开发 者 账号 ， 你 将 无 法 部 署 应 用 到 
人 


接 下 来 ， 确 保 已 经 正确 选择 了 你 的 设备 作为 构建 目标 。 你 的 设备 是 项 目 设置 里 支持 的 类 型 
吗 ? 例如 ， 如 果 你 的 应 用 明确 地 禁用 了 iPad 设备 ， 那 么 你 就 不 能 部 署 到 iPad 上 了 。 




















如 果 你 修改 文件 时 使 用 React 包 管 理 器 重新 构建 的 话 ， 可 能 会 遇 到 图 8-16 中 的 错误 。 








Could not connect to development server. 
Ensure node server is running and available 
on the same network - run 'npm start' from 
react-native root 


URL: http://localhost:8081/index.ios.bundle 


Could not connect to the server. 














8-16: 无 法 连接 到 开发 服务 器 





主 1: 申请 Apple 开发 者 账号 用 于 真 机 测试 是 免费 的 。 一 一 译 者 注 
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这 表示 你 的 应 用 已 经 尝试 过 从 React Native 包 管 理 器 加 载 JavaScript 的 打包 文件 ， 但 它 无 法 
被 成 功 加 载 。 在 这 种 情况 下 ， 试 试 下 列 检查 步骤 。 


。 你 是 否 在 AppDelegate.m 里 使 用 了 包 管 理 器 选项 ? 

。 AppDelegate.m 中 的 IP 地 址 是 否 正确 ? 

。 你 的 电脑 与 iOS 设备 是 否 在 相同 的 WiFi 网 络 下 ? 

。 React Native 包 管 理 器 是 否 运行 在 项 目 目 录 下 ? 

。 是 否 在 电脑 上 可 以 访问 http:/ 你 的 卫 地 址 :8081/index.ios.bundle ? 
。 是 否 可 以 在 iOS 设备 上 访问 这 个 网 址 ? 
































如 有 果 你 使 用 了 预 构建 的 打包 文件 ， 可 能 会 遇 到 另 一 个 问题 ， 即 默认 的 react -native bundle 
--minify 命令 会 把 打包 的 文件 放置 在 错误 的 路 径 下 。 这 个 问题 很 容易 解决 ， 根 据 错误 信息 
提示 把 main.jsbundle 文件 放置 到 正确 的 路 径 下 即 可 。 


8.3.6 ”模拟 器 行为 

你 可 能 会 不 时 发 现 设备 模拟 器 的 一 些 奇怪 的 行为 。 如 果 你 的 应 用 持续 不 断 地 崩 涡 ， 或 者 修 
改 后 的 代码 无 法 在 模拟 器 上 反映 出 来 ， 那 么 首先 试 试 最 简单 的 办 法 ， 即 从 设备 上 删除 你 的 
应 用 。 








值得 注意 的 是 ， 简 单 地 删除 应 用 可 能 达 不 到 预期 的 效果 ， 在 很 多 系统 上 ， 被 印 载 的 应 用 会 
有 一 些 残 留 的 文件 ， 这 些 文件 在 今后 可 能 会 有 副作用 。 如 图 8-17 所 示 ， 最 直接 的 办 法 就 是 
重 置 整 个 设备 模拟 器 ， 一 切 从 头 再 来 。 这 样 ， 模 拟 器 上 所 有 的 文件 和 应 用 都 将 被 移 除 。 





























和 


氢 加 |eF 羡 -IF File Edit Hardware 
About iOS Simulator 









Services > 
Reset Content and Settings... 


Hide iOS Simulator 9 息 H 
Hide Others eH 








Quit iOS Simulator $6Q 











图 8-17: Reset Content and Settings… 选项 将 会 清空 设备 
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8.4 测试 代码 
会 调试 固然 很 好 ， 但 你 一 定 想 在 错误 发 生 之 前 就 阻止 它们 (如果 不 可 避免 ， 就 捕获 它 
们 )。 自 动 化 测试 和 静态 类 型 检查 是 非常 实用 的 工具 ， 你 一 定 也 想 在 应 用 里 使 用 它们 。 


























测试 JavaScript 代码 


大 部 分 你 写 的 React Native 代码 可 能 甚至 没有 意识 到 它们 被 运行 在 移动 环境 
里 了 。 例如， 所 有 的 业务 逻辑 都 可 以 从 泻 染 逻辑 中 隔离 出 来 。 这 意味 着 你 可 
以 使 用 任何 你 喜欢 的 普通 JavaScript 开发 工具 来 测试 你 的 JavaScript 代码 ! 








这 一 节 将 具体 介绍 如 何 使 用 Flow 进行 类 型 检查 ， 以 及 如 何 使 用 Jest 进行 单元 测试 。 


8.4.1 使 用 Flow 进 行 类 型 检查 

Flow (http://flowtype.org/) 是 一 个 静态 类 型 检查 的 JavaScript 类 库 。 它 依赖 类 型 推断 来 检 
测 类 型 错误 ， 其 至 也 可 以 检查 注释 代码 。 它 允许 你 逐渐 往 现 有 的 项 目 里 添加 注解 。 类 型 检 
查 可 以 帮助 你 尽早 发 现 凌 在 问题 ， 然 后 增强 不 同 组 件 和 模块 之 间 的 API 的 健壮 性 。 








运行 Flow 是 很 简单 的 : 


$ flow check 

















应 用 默认 自 带 了 .flowconfig 文件 ， 它 配置 了 Flow 的 行为 。 如 果 你 发 现 了 很 多 关于 node_ 
modules 的 错误 ， 可 能 需要 添加 这 一 行 到 .flowconfig 文件 的 [ignore] 下 面 : 


.*/node_modules/.* 
再 次 运行 flow check， 就 没有 任何 错误 了 : 


$ flow check 
$ Found 0 errors. 


尽情 使 用 Flow 来 帮助 你 开发 React Native 应 用 吧 。 


8.4.2 ”使 用 Jest 进 行 测试 


React Native 支持 使 用 Jest 来 测试 React 组 件 。Jest 是 一 个 基于 Jasmine 的 单元 测试 框架 。 
它 提供 了 侵入 性 的 依赖 自动 模拟 的 功能 ， 也 可 以 很 好 地 与 React 测试 工具 进行 整合 。 


使 用 Jest 需要 先进 行 安装 : 








npm install jest-cli --save-dev 
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更 新 package.json 文件 ， 在 scripts 中 添加 test: 
{ 


"scripts": { 
"test": "jest" 
} 
} 
运行 npm test 命令 之 后 ， 将 会 启动 jest。 


接 下 来 ， 创 建 一 个 tests/ 目录 。Jest 将 会 递归 地 搜索 在 tests/ 目录 下 的 测试 文 从 
它们 : 


济 
ih 
和 1 
a 





mkdir __tests__ 











现在 创建 一 


本 


新 文件 tests/dummy-test.js， 并 编写 我 们 的 第 一 个 测试 用 例 : 
"Use strict'; 


describe('a silly test', function() { 

it('expects true to be true', function() { 
expect(true).toBe(true); 

]); 

]); 


现在 ， 如 果 你 运行 npm test， 会 看 到 测试 用 例 全 部 通过 了 。 





当然 ， 除 了 这 个 简单 的 例子 之 外 ， 测 试 还 包含 更 丰富 的 内 容 。 你 可 以 在 React Native 仓库 
中 的 Movie 示例 应 用 中 获得 更 多 参考 。 








举例 来 说 ， 这 里 有 一 个 缩减 版 的 Movie 示例 应 用 中 getImageSource 功能 的 测试 文件 
(GitHub 上 有 完整 的 代码 可 用 : https://github.conmy/facebook/react-native/blob/0.12-stable/ 


Examples/Movies/_ tests_ /getImageSource-test.js)。 





jest.dontMock('../getImageSource'); 
var getImageSource = require('../getImageSource'); 


describe('getImageSource', () => { 
it('returns null for invalid input', () => { 
expect(getImageSource().uri).toBe(null); 
}); 


DD; 


需要 注意 的 是 ， 你 需要 先 显 式 地 阻止 Jest 模拟 文件 ， 然 后 再 引入 你 的 依赖 文件 。 如 果 想 了 
解 更 多 关于 Jest 的 信息 ， 建 议 从 它 的 文档 开始 (https://facebook.github.io/jest/) 。 
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8.5 当 你 陷入 困境 


如 果 你 遇 到 一 个 特别 环 手 的 问题 ， 并 且 自 己 无 法 解决 的 话 ， 可 以 尝试 咨询 社区 。 你 可 以 去 
这 些 地 方 寻求 建议 : 








。 #reactnative IRC 聊天 室 (irc://chat.freenode.net/reactnative) 
。 React 讨论 论坛 (https:/discuss.reactjs.org/) 
。 Stack Overflow (http://stackoverflow.com/questions/tagged/react-native) 


如 果 怀 疑 所 遇 到 的 问题 可 能 是 React Native 自身 的 bug， 可 以 去 GitHub 检查 现 有 的 问题 列 
表 (https://github.com/facebook/react-native/issues)。 在 提交 问题 的 时 候 ， 使 用 一 个 小 的 示 
例 程序 帮助 你 说 明 问 题 通常 是 很 实用 的 。 





8.6 ”小结 


总 体 来 说 ， 调 试 React Native 与 调试 Web 平台 上 的 React 应 该 会 有 非常 相似 的 体验 。 大 多 
数 你 熟悉 的 工具 在 这 里 依然 可 用 ， 这 可 以 让 我 们 更 容易 地 过 渡 到 React Native 开发 。 话 虽 
如 此 ，React Native 应 用 有 它 特 有 的 复杂 性 ， 有 时 候 这 种 复杂 性 会 表现 为 一 些 令 人 诅 起 的 
bug。 了 解 调试 应 用 的 方法 以 及 环境 产生 的 错误 信息 ， 将 会 对 你 形成 高 效 的 工作 方式 有 持 
续 的 帮助 。 
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第 9 章 


学 以 致 用 








前 文中 已 经 介绍 了 许多 构建 React Native 应 用 的 知识 ， 本 章 将 整合 并 应 用 这 些 知识 。 目 前 
所 介绍 的 大 部 分 是 小 型 应 用 ， 本 章 将 介绍 大 型 应 用 的 基本 结构 ， 以 及 Reflux (一 个 基于 
Flux 模型 的 单 向 数据 流 类 库 ) 的 使 用 。 本 章 还 会 介绍 如 何 使 用 Dimensions 接口 进行 不 同 尺 
寸 屏 幕 的 适 配 。 本 章 最 后 布置 了 一 些 课 后 任务 : 在 现 有 的 React Native 代码 基础 上 开发 更 
多 的 功能 ， 看 看 感觉 如 何 。 


9.1 内 卡 应 用 


Zebreto 是 一 个 闪 卡 应 用 ， 它 的 产生 是 基于 间隔 重复 学 习 法 (Spaced Repetition System， 
SRS) ， 一 种 高 效 记 忆 的 学 习 策 略 。 间 隔 重复 学 习 法 的 目标 是 在 你 忘记 之 前 就 让 你 复习 需要 
记忆 的 知识 。 如 果 你 学 过 外 语 ， 也 许 会 熟悉 间隔 重复 学 习 法 。 这 种 方法 可 以 让 你 更 快 地 记 
住 大 量 信息 ， 以 达到 永久 记忆 的 目标 。 一 个 常用 的 办 法 是 在 较 短 间隔 时 间 内 进行 复习 ， 比 
如 一 个 小 时 ， 然 后 随 着 正确 率 的 提高 逐渐 延长 间隔 : 先是 一 个 小 时 ， 然 后 延长 到 一 天 ， 接 
着 延长 到 三 天 ， 最 后 延长 到 一 个 星期 。 记 忆 间 隔 可 以 逐渐 延长 到 一 年 或 五 年 之 义 。 使 用 传 
统 的 纸 笔 和 卡片 来 使 用 这 种 学 习 法 是 不 切实 际 的 ， 因 此 我 们 开发 了 这 个 应 用 。 














Zebreto 会 比 我 们 之 前 开发 的 示例 应 用 更 复杂 一 些 。 学 习 它 主要 是 为 了 了 解 更 复杂 的 应 用 应 
该 怎样 开发 。 该 应 用 的 所 有 代码 都 在 GitHub 上 (https://github.com/bonniee/learning-react- 
native/tree/master/Zebreto)， 而 且 是 完全 跨 平台 的 ， 可 以 运行 在 Android 平台 上 并 与 10S 上 
的 表现 相 一 致 。 








如 图 9-1 所 示 ，Zebreto 应 用 有 三 个 主要 的 视图 。 
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。 主 界面 ， 列 出 了 存在 的 分 组 ， 并 且 可 以 创建 新 的 分 组 。 
。 创建 卡片 界面 。 





。 复习 界面 。 
@@ ZEBRETO 的 ZEBRETO 的 ZEBRETO 
der Voge| 
oe 
Penge 国 


Create Deck 





Stop Reviewing 











图 9-1: 查看 分 组 、 创 建 卡片 以 及 复习 卡片 


该 应 用 的 用 户主 要 有 两 个 交互 流程 。 一 个 是 内 容 的 创建 〈 即 创建 分 组 和 卡片 )。 创 建 内 
的 流程 如 下 (如 图 9-2 所 示 )。 





难 


(1) 用 户 点 击 Create Deck 按钮 。 

(2) 用 户 输出 一 个 分 组 名 称 ， 然 后 轻 触 返回 按钮 或 点 击 Create Deck 按钮 继续 创建 。 

(3) 用 户 在 Front 和 Back 输入 框 输入 内 容 ， 然 后 点 击 Create Card。 

(4) 输 出 零 个 或 多 个 卡片 之 后 ， 用 户 可 能 会 点 击 Done 按钮 返回 初始 界面 ， 或 者 可 以 点 击 
Review Deck 按钮 进行 复习 。 
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als|altlgln[j|k[iim als|altlglnlj[kli 
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图 9-2: 创建 一 个 分 组 
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通过 点 击 主 界面 上 的 “+” 按 钮 ， 还 可 以 在 今后 继续 创建 卡片 。 





第 二 个 主要 的 交互 流程 是 卡片 的 复习 (如 图 9-3 所 示 )。 


(1) 用 户 点 击 需 要 复习 的 分 组 名 。 

(2) 展现 问答 界面 给 用 户 。 

(3) 用 户 点 击 其 中 一 个 选项 。 

(4) 应 用 根据 猜测 正确 与 否 来 反馈 给 用 户 。 

(5) 点 击 Continue， 继 续 复习 。 

(6) 所 有 的 复习 完成 之 后 ， 用 户 会 看 到 Reviews cleared! 界面 。 





arier 全 carier = lcarier 全 ee Crere Carer aa26pM 


@ ZEBRETO @ ZEBRETO @ ZEBRETO @ ZEBRETO @ ZEBRETO 
83% correct 
Ee 和 


Stop Reviewing Correct! Next card? Oops, not quite. Next card? 














图 9-3: 复习 卡片 


如 果 用 户 猜 对 了 卡片 ， 那 么 我 们 要 增加 卡片 的 熟练 值 ， 并 且 推 迟 下 次 卡片 出 现 的 时 间 。 同 
样 ， 对 于 每 一 个 猪 错 的 卡片 ， 我 们 要 减少 卡片 的 熟练 值 ， 并 且 尽 快 再 安排 一 个 复习 任务 。 


我 们 将 使 用 Zebreto 应 用 ， 尤 其 是 上 面 描述 的 特性 ， 来 讨论 一 些 关于 构建 完整 应 用 的 模式 
以 及 出 现 的 问题 。 


9.1.1 项 目 结 构 


这 里 是 项 目 大 体 的 结构 : 


Zebreto 
| - .babelrc 
|- ios 
|- index.ios.js 
|- node_modules 
|- package.json 
| - src 
|- actions .js 
|- components 
| - data 
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| - stores 

|- styles 
在 Zebreto 目录 内 ， 我 们 的 项 目 简单 划分 了 iOS 和 Android 以 及 src/ 子 目录 。src/ 目录 包含 
项 目 中 所 有 的 React 代码 。 同 时 注意 .babelrc 文件 ， 它 修改 了 Babel 默认 的 配置 。 如 果 你 在 
React Native 项 目的 根 目录 添加 一 个 .babelrc 文件 ，React Native 包 管 理 器 将 会 自动 加 载 它 。 
在 这 种 情况 下 ， 最 大 的 改变 是 我 们 启用 了 ES6 模块 语法 。 











// .babelrc 


{ 
"stage": 1， 
"optional": ["runtime"], 
"loose": "all", 
"whitelist": [ 

"es6.modules" 

] 

} 


大 部 分 情况 下 ， 我 们 在 src/ 目录 内 进行 开发 工作 。 
在 src/ 目录 内 ， 我 们 的 代码 通过 功能 再 进行 组 织 。 





。 components/ 


所 有 的 React 组 件 都 在 这 里 





。 data/ 
你 可 以 在 这 里 找到 数据 模型 


。 stores/ 
我 们 的 Reflux 的 数据 store (存储 )， 很 快 我 们 会 讨论 到 它 
。 actions.js 


Reflux 的 action (动作 )， 我 们 将 与 数据 store 一 起 讨论 


。 styles/ 
这 里 可 以 找到 样式 对 象 ， 支 持 在 任何 地 方 复 用 














9.1.2 ”组 件 层次 结构 
该 应 用 有 三 个 场景 ， 它 们 可 以 在 任何 时 候 被 展现 。 为 了 让 你 对 应 用 的 总 体 结构 有 一 些 认 
识 ， 我 们 画 出 这 三 个 场景 的 组 件 树 。 


首先 ， 我们 可 以 在 主 界面 创建 分 组 。 这 个 界面 将 会 显示 现 有 的 所 有 分 组 ， 如 图 9-4 所 示 。 
组 件 层次 结构 如 图 9-5 所 示 。 
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@ ZEBRETO 
German| 























图 9-4: 从 主 界面 创建 分 组 









<View> 
















<DeckCreation> 
<(CreateDeckButton> 


<Button> 


<NormalText> 由 <NormalText> 


















<NormalText> 











图 9-5: 分 组 创建 界面 的 组 件 树 
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紧 接着 是 卡片 创建 界面 (图 





9-6) 。 











8:24 PM 


@ ZEBRETO 


Front: 


Carrier 全 


der Mann 


Back: 


the man 


qlwlelrlitlylulilolp 


alsldiflglhljlkill 


图 :jx < vblnmn 园 











Space 














9-6: 卡片 创建 界面 











该 界面 的 组 件 层 次 结构 如 图 





9-7 所 示 。 








<Labeledlnput> 








<Heading> 



















<Navigator> 





<NewCard> 


<Labeledlnput> 





<NormalText> 


<NormalText> 









<View> 





<NormalText> 





图 9-7: 分 组 创建 的 组 件 树 
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最 后 ， 我 们 有 复习 界面 ， 如 图 9-8 所 示 。 你 也 许 会 注意 到 ，<Review> 组 件 的 子 组 件 会 根据 
不 同 的 复习 流程 而 发 生 改 变 。 用 户 完 成 所 有 复习 之 后 ，<ViewCard> 组 件 将 会 被 替换 成 用 户 
复习 表现 的 反馈 信息 。 








Carrier 全 8:26 PM mw 


@ ZEBRETO 


das Kind 
der Mann 
der Hund 


wenden 


Stop Reviewing 























图 9-8: 卡片 复习 界面 
卡片 复习 界面 的 组 件 层 次 结构 如 图 9-9 所 示 。 

















<NormalText> 
































<HeadingText> 


<NormalText> 


图 9-9: 分 组 创建 界面 的 组 件 树 


<NormalText> 


<NormalText> 
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如 前 所 述 ， 当 你 开发 大 型 应 用 时 ， 编 写 能 不 断 复 用 的 样式 组 件 是 非常 有 用 的 。 如 此 一 来 ， 
大 多 数 的 组 件 都 不 需要 使 用 <Text> 组 件 来 演 染 ， 而 是 使 用 <HeadingText> 和 <NormaLText> 
组 件 来 代替 。 类 似 地 ，<Button> 组 件 也 经 常会 被 复 用 。 这 样 做 可 以 提高 代码 的 可 读 性 ， 让 
创建 新 组 件 变 得 更 加 容易 。 





以 上 内 容 应 该 会 让 你 对 Zebreto 应 用 的 结构 有 一 些 感性 认识 。 目 前 为 止 ， 我 们 尚未 讨论 用 
户 交互 以 及 数据 的 修改 与 持久 化 存储 这 样 的 内 容 。 我 们 先 来 看 数据 模型 。 


9.2 ”模型 与 数据 存储 


既然 我 们 已 经 了 解 Zebreto 是 怎样 处 理 泻 染 逻 辑 的 ， 那 么 它 又 是 如 何 处 理 数据 的 呢 ? 我 们 
需要 记录 哪些 数据 呢 ? 应 该 要 怎么 做 ? 




















Zebreto 由 两 个 基本 模型 构成 : 卡片 (Card) 和 分 组 (Deck) 。 


分 组 包含 一 个 人 类 可 读 的 名 称 和 一 个 唯一 的 ID。 我 们 有 时 候 也 储存 一 些 关 于 它 所 包含 的 卡 
片 的 元 数据 。 

















id;s 
totalCards, // computed, may be out of date 
dueCards // computed, may be out of date 


} 








卡片 有 正面 (front) 有 反面 (back) (比如 “der Hund” 和 “the dog”)， 以 及 所 属 的 分 
组 (deckID)。 此 外 ， 还 有 一 个 表示 成 整数 的 熟练 值 (strength) ， 练 习 的 日 期 (dueDate)。 
Zebreto 使 用 moment.js 来 处 理 日 期 对 象 ; 




















Card: { 
front, 
back, 
deckID, 
strength, 
dueDate, 
id 

} 


分 组 和 卡片 应 该 用 简单 的 JavaScript 对 象 来 表示 ， 但 是 为 了 方便 ，Zebreto 使 用 了 一 些 包 装 
类 。 如 果 查 看 src/data/ 目录 ， 你 会 找到 我 们 的 模型 类 。 这 里 是 一 个 Deck 类 : 


// src/data/Deck.js 
import md5 from 'md5'; 


class Deck { 
constructor(name) { 
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this.name = name; 
this.totalCards = 0; 
this.dueCards = 0; 
this.id = md5(name); 


} 


setFromObject(ob) { 
this.name = ob.name; 
this.totaLCards = ob.totalCards; 
this.dueCards = ob.dueCards; 
this.id = ob.id; 


} 


resetCounts() { 
this.totalCards = 0; 
this.dueCards = 0; 


} 


static fromObject(ob) { 
let d = new Deck(ob.name); 
d.setFromObject(ob); 
return d; 
} 
} 


module.exports = Deck; 
正如 你 看 到 的 一 样 ，Deck (分 组 ) 类 非常 简单 。 它 的 构造 函数 需要 一 个 区 分 不 同 Deck 的 


参数 ， 然 后 为 其 他 属性 设置 合理 的 默认 值 。 它 也 为 我 们 提供 了 一 个 从 JavaScript 对 象 中 创 
建 Deck 的 便利 的 方法 ， 以 及 一 个 重 置 Deck 元 数据 的 简单 的 办 法 。 











目前 ， 所 谓 唯一 的 有 D 是 通过 对 相关 信息 做 MD5 散 列 生成 的 。 


Card (卡片 ) 类 看 起 来 非常 类 似 ， 它 为 我 们 提供 了 一 个 从 普通 对 象 中 创建 Card 的 助手 方法 
(helper method) : 


// src/data/Card.js 


import md5 from "md5 ' ; 
import moment from 'moment'; 


class Card { 

Constructor(front，back，deckID) { 

this.front = front; 

this.back = back; 

this.deckID = deckID; 

this.strength = 0; 

this.dueDate = moment(); 

this.id = md5(front + back + deckID); 
} 


setFromObject(ob) { 
this.front = ob.front; 
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this.back = ob.back; 
this.deckID = ob.deckID; 
this.strength = ob.strength; 
this.dueDate = moment(ob.dueDate); 
this.id = ob.id; 

} 


static fromObject(ob) { 
let c = new Card(ob.front, ob.back, ob.deckID); 
c.setFromObject(ob); 
return c; 
} 
} 


module.exports = Card; 


为 了 理解 如 何在 应 用 中 使 用 这 些 模型 ， 我 们 来 看 一 看 数据 流 架 构 。 


9.2.1 ”数据 流 架 构 : Reflux 与 Flux 


Zebreto 使 用 基于 Flux 模式 的 Reflux 来 实现 数据 流 架 构 。 pe Ak 要 
数据 流 的 管理 。 在 较 小 的 应 用 中 ， 组 件 之 间 的 通信 通常 都 不 是 重要 的 问题 。 考 虑 一 
按钮 会 影响 父 组 件 的 状态 的 情况 


// Child.js 
import React from "react-native ' ; 
var {Text, TouchableOpacity} = React; 


export default React.createClass({ 
render() { 
<TouchabLe0pacity onPress={this.props.onPress}> 
<Text>ChiLd Component</Text> 
</TouchableOpacity> 
} 
]); 


从 父 组 件 传递 一 个 回调 函数 给 子 组 件 ， 父 组 件 可 以 接收 到 子 组 件 的 交互 行为 。 











// Parent.js 
import React from "react-native ' ; 
import Child from './Child'; 


export default React.createClass({ 

getInitialState() { 

return { 

numTaps: 0 

} 
}, 
_handlePress() { 

this.setState({numTaps: this.state.numTaps + 1}); 
}; 
render() { 


下 点 击 
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<ChiLd onPress={this._handLePress}/> 
} 
}); 


对 于 简单 的 用 例 ， 这 个 模式 可 以 正常 工作 。 


当 我 们 需要 更 复杂 的 交互 时 ， 显 然 我 们 需要 更 健壮 的 数据 流 架 构 。 当 组 件 树 中 更 低层 的 组 
件 需要 影响 高 层 组 件 的 状态 时 ， 应 该 怎么 做 呢 ? 让 我 们 再 来 看 看 这 个 界面 (图 9-10)。 





Carrier 全 8:26 PM i 


@ ZEBRETO 














图 9-10: 复习 卡片 
在 你 选择 一 个 答案 之 后 ， 会 发 生 下 列 动作 。 
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() 应 用 提供 视觉 反馈 ， 告 知 选择 正确 与 否 。 
(2) 下 一 个 卡片 准备 就 绪 。 

(3) 在 适当 的 时 候 ， 更 新 卡片 的 熟练 值 。 
(4) 在 适当 的 时 候 ， 更 新 分 组 中 的 待 复习 量 。 





如 果 想 在 复习 中 途 退 出 Zebreto 应 用 时 保存 当前 数据 ， 那 么 每 次 选择 一 个 答案 后 ， 所 有 改 
变 的 状态 都 应 该 被 保存 起 来 (图 9-11)。 












<ViewCard> 









<HeadingText> 


<NormalText> 


<NormalText> 


<NormalText> 


<NormalText> 




























图 9-11: 关于 复习 界面 需要 了 解 的 组 件 


顶层 的 Zebreto 组 件 以 及 <Review> 和 <ViewCard> 组 件 都 会 接收 到 这 些 更 新 。 在 这 个 用 例 
下 ， 传 递 回调 函数 的 方式 无 法 良好 地 进行 伸缩 ， 因 此 我 们 使 用 类 Flux 的 数据 架构 来 完成 这 
项 工作 。 














Flux 更 像 是 一 种 模式 ， 而 不 是 一 个 正式 的 框架 ， 它 主要 的 概念 是 单 向 数据 流 。 在 React 中 ， 
属性 和 状态 都 通过 父 组 件 传递 给 子 组 件 ， 单 向 数据 流 意 味 着 高 性 能 的 渲染 过 程 ， 我 们 的 应 
用 状态 也 会 更 容易 把 握 。 








传递 大 量 回 调 函 数 破坏 了 清晰 的 流程 ， 本 质 上 形成 了 双向 数据 绑 定 ， 可 能 会 出 乎 意料 地 触 
发 连锁 更 新 。 通 过 使 用 类 Flux 应 用 架构 (如 图 9-12)， 我 们 从 可 触发 的 UI 组 件 中 分 离 出 
改变 应 用 状态 的 逻辑 ， 维 持 单 向 模式 。 

















Action 






Dispatcher 


9-12: Flux 架构 中 的 数据 传播 
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使 用 Flux 模式 ， 视 图 会 根据 Store 中 的 信息 进行 泻 染 。Action 可 以 由 用 户 与 视图 的 交互 
或 其 他 事件 触发 ， 比 如 应 用 的 初始 化 事件 。Dispatcher 处 理 传 入 的 Action 并 将 它们 传 到 
Store 中 。 
































Flux 是 Facebook 公司 为 解决 此 类 问题 而 提出 的 官方 架构 ， 但 React 社区 也 有 其 他 一 些 受 
Flux 局 发 而 开发 的 类 库 ， 它 们 都 试图 解决 相同 的 问题 。Reftux， 如 图 9-13 所 示 ， 就 是 一 个 
特别 出 名 的 类 库 ， 我 们 将 会 在 Zebreto 里 使 用 它 。 
























Actions 


Stores 











9-13: Reflux 架构 中 的 数据 传播 


Reflux 中 没有 Dispatcher 的 概念 ， 只 有 View、Store 和 Action， 其 中 Store 可 以 直接 监听 


Action。 
使 用 npm install 命令 很 容易 就 可 以 将 Reflux 添加 到 React Native 项 目 中 : 


npm install --save reflux 


9.2.2 ”在 Zebreto 中 使 用 Reflux 
我 们 一 起 来 看 看 在 应 用 中 怎样 使 用 Reflux。 


在 Zebreto 中 ， 我 们 有 多 个 Store (如 图 9-14 所 示 )。 

















。 DeckMetaStore 

包含 分 组 元 数据 ， 比 如 待 复习 的 数量 。 
。 CardsStore 

包含 所 有 卡片 。 
。 ReviewStore 

包含 当前 分 组 中 所 有 的 复习 内 容 。 


Store 可 以 互相 监听 。Zebreto 中 使 用 从 CardsStore 和 DeckMetaStore 中 获得 的 信息 来 创建 复 
习 的 内 容 ， 因 此 ReviewStore 监听 了 其 他 两 个 Store。 它 们 之 间 的 关系 如 图 9-14 所 示 。 
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DeckMetaStore CardsStore 


ReviewStore 








9-14: Zebreto 中 使 用 的 Store 
actions.js 文件 中 还 有 多 个 Action: 


// src/actions.js 
import Reflux from 'reflux'; 


export var DeckActions = RefLux.createActions([ 
"createDeck ' ， 
"deLeteDeck ' ， 
"reviewDeck ' ， 
'deleteAllDecks' 
由 六 


export var CardActions = RefLux.createActions([ 
'createCard', 
'deleteCard', 
'review', 
'editCard', 
'deleteAllCards', 
]); 


任何 组 件 都 可 以 触发 被 Store 监听 的 Action， 因 此 可 能 会 产生 连锁 效应 。 
回 到 我 们 复习 卡片 的 例子 中 ，Reflux 数据 流 工作 流程 如 下 (图 9-15)。 


。 用 户 选 择 一 个 答案 ， 触 发 CardActions.review 动作 。 

。 ReviewStore 监听 了 CardActions.review 动作 ， 并 处 理 新 的 信息 。 

。 ReviewStore 在 适当 的 时 候 触 发 CardActions .editCard 动作 。 

。 CardsStore 监听 CardActions.editCard 动作 , 它 会 把 相关 的 改变 储存 到 AsyncStorage 中 ， 
并 触发 更 新 。 

。 顶层 的 <Zebreto> 组 件 监 听 Cardsstore 中 的 更 新 ， 并 相应 地 更 新 自身 的 状态 。 
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<Navigator> 
<Review> 


<ViewCard> 


<NormalText> 





DeckMetaStore CardsStore 





ReviewStore 


CardActions.editCard 
CardActions.review 




















<Button> 


<NormalText> 





<NormalText> 








图 9-15: 处 理 卡 片 复习 之 后 的 更 新 动作 
另 一 个 例子 是 分 组 的 创建 ， 流 程 如 下 。 





创建 分 组 按钮 也 可 以 触发 一 个 属性 中 的 回 





AsyncStorage 中 。 


创建 分 组 的 按钮 可 以 触发 一 个 DeckActions .createDeck 动作 。 


调 函 数 ， 让 Navigator 过 渡 到 创建 卡片 的 界面 。 


DeckMetaStore 监听 DeckActions.createDeck 动作 ;， 它 创建 一 个 新 的 Deck 并 存储 到 


9.2.3 AsyncStorage 与 Reflux Store 的 持久 化 


Zebreto 通过 简单 的 JSON 序列 化 将 数据 存储 到 AsyncStorage 中 。 这 个 过 程 通 过 Store 进 
行 处 理 ， 因 为 Store 是 应 用 状态 实际 情况 的 中 心 来 源 。 例 如 ， 我 们 看 看 Cardsstore 这 个 


例子 。 


// src/stores/CardsStore.js 


import Card from './../data/Card'; 
import RefLux from 'refluyx'; 
import _ from 'Lodash ' ; 


import {CardActions} from './../actions '; 


import React from 'react-native'; 
var { AsyncStorage } = React; 


const CARD_KEY = 'zebreto-cards'; 
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var cardsStore = Reflux.createStore({ 

init() { 
this._ LoadCards().done(); 
this.listenTo(CardActions.createCard, this.createCard); 
this. listenTo(CardActions.deleteAllCards, this.deleteAllCards); 
this.listenTo(CardActions.editCard, this.editCard); 
this._cards = []; 
this.emit(); 

}， 


async _LoadCards() { 
try { 
var val = await AsyncStorage.getItem(CARD_KEY); 
if (val !== null) { 
this._cards = JSON.parse(val).map((card0bj) => { 
return Card.fromObject(card0bj); 
]); 
this.emit(); 
} 
else { 
console.info(* ${CARD_KEY} not found on disk.); 
} 


catch (error) { 
console.error('AsyncStorage error: 


，error .message); 
} 
}， 


async _writeCards() { 


try { 
await AsyncStorage.setItem(CARD_KEY, JSON.stringify(this._cards)); 


catch (error) { 
console.error('AsyncStorage error: 


} 
}, 


，error .message); 


deleteAllCards() { 
this._cards = []; 
this .emit(); 


}, 


editCard(newCard) { 
// 假设 newCard.id 对 应 一 个 存在 的 卡片 。 


let match = _.find(this. cards, (card) => { 
return card.id === newCard.id; 
]); 


match.setFromObject(newCard); 
this.emit(); 


}, 


createCard(front, back, deckID) { 
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this._cards.push(new Card(front, back, deckID)); 
this.emit(); 
}， 


emit() { 
this. writeCards().done(); 
this.trigger(this. cards); 
} 
}); 


export default cardsStore; 





























CardsStore 是 Zebreto 应 用 中 唯一 处 理 卡 片 相关 数据 读 写 的 地 方 。 现 在 ， 我们 通过 
_loadCards() 和 _writeCards() 图 数 调用 AsyncStorage 来 完成 这 项 工作 。 如 果 我 
们 想 更 换 储存 卡片 数据 的 方式 ， 例 如 ， 更 换 成 SQLite 数据 库 或 通过 网 络 调用 获取 数 
据 ， 那 我 们 只 需要 更 新 这 两 个 方法 就 可 以 轻松 完成 。 


另 一 个 值得 注意 的 地 方 是 ，CardsStore 中 的 init() 方法 在 初始 化 时 会 加 载 储存 的 数据 ， 任 
何 时 候 卡 片 有 更 新 ， 都 会 通过 emit() 方法 重新 存储 到 AsyncStorage 中 。 这 样 一 来 ， 用 户 
无 论 什 么 时 候 退 出 应 用 ， 他 们 的 数据 都 会 被 保存 起 来 。 














9.3 使 用 Navigator 


Zebreto 中 的 另 一 个 可 能 比较 有 趣 的 地 方 是 <Navigator> 组 件 的 用 法 。 我 们 来 看 看 根 组 件 的 
源 代码 : 


// src/components/Zebreto. js 
import React from 'react-native'; 
var { 

StyleSheet, 

View, 

Navigator 
} = React; 


import RefLux from 'refluyx'; 
import {DeckActions} from './../actions’'; 


import Decks from './Decks'; 
import Review from './Review'; 
import NewCard from './NewCard'; 
import Heading from './Header'; 


import CardsStore from './../stores/CardsStore'; 
import DeckMetaStore from './../stores/DeckMetaStore'; 


var Zebreto = React.createCLass({ 
displayName: 'Zebreto', 


mixins: [Reflux.connect(DeckMetaStore, 'deckMetas')], 
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componentWillMount() { 
CardsStore.emit(); 


}, 


review(deckID) { 
DeckActions.reviewDeck(deckID); 
this.refs.navigator .push({ 
name: 'review', 


data: { 
deckID: deckID 
} 
]); 


}， 


createdDeck(deck) { 
this.refs.navigator .push({ 
name: 'createCards', 
data: { 
deck: deck 
} 
]); 
}， 


goHome() { 
this.refs.navigator .popToTop(); 
}， 


_renderScene(route) { @ 
switch (route.name) { 
case 'decks': 
return <Decks review={this.review} 
createdDeck={this.createdDeck}/>; 
case 'createCards': 
return <NewCard 
review={this.review} 
quit={this .goHome} 
nextCard={this.createdDeck} 
{...route.data}/>; 
case 'review': © 
return <Review quit={this.goHome} {...route.data}/>; 
default: 
console.error('Encountered unexpected route: 


+ route.name); 
} 
return <Decks/>; 


}, 


render() {©@ 
return ( 
<View style={styles.container}> 

<Heading/> 

<Navigator 
ref='navigator' 
initialRoute= 
renderScene={this._renderScene}/> 
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var styles = StyleSheet.create({ 
container: { 
flex: 1， 
marginTop: 30 
} 
]); 


export default Zebreto; 
这 个 文件 内 容 较 多 ， 我 们 把 它 分 成 几 个 部 分 。 


@ render 方法 实际 上 非常 简短 。 我 们 把 所 有 东西 包装 在 <View> 组 件 内 ， 然 后 谊 染 包含 
logo 的 头 部 ， 还 有 <Navigator> 组 件 ， 它 泻 染 适 当 的 场景 。 正 如 我 们 之 前 所 讨论 的 ， 我 
们 可 以 从 _renderScene() 方 法 中 看 到 三 个 可 能 的 场景 ; decks、createCards 和 review。 
这 样 ， 应 用 顶层 由 一 个 包装 组 件 和 两 个 子 组 件 组 成 。 

@ _renderscene() 同时 也 要 将 恰当 的 数据 和 回调 函数 作为 属性 附加 到 到 每 一 个 场景 组 件 
中 。 这 里 使 用 了 更 方便 的 传播 语法 。 你 之 前 可 能 不 经 常 看 到 传播 语法 ， 其 实 这 是 取 自 
ES6 的 一 个 优雅 的 特性 。 举 例 而 言 ， 我 们 像 下 面 的 例子 这 样 来 调用 _renderscene() 方 
法 ， 它 会 返回 下 一 个 标注 那样 的 代码 。 

_renderScene({ 
data: { 


someProp: 'whatever', 
anotherProp: 2 









































} 
了 和 
@ 通过 传播 语法 ，_renderScene() 方法 会 返回 与 下 面 等 效 的 代码 ， 
return ( 
<Review 


quit={this .goHome} 
someProp="whatever" 
anotherProp={2} />); 


好 了 ， 这 就 是 我 们 的 <zebreto> 根 组 件 ， 它 保留 了 一 个 到 <Navigator> 的 引用 (ref), 并 且 
管理 了 不 同 的 场景 。 但 是 大 多 数 情况 下 ， 都 是 在 各 自 场景 里 实现 更 复杂 的 功能 。 























我 们 把 <Navigator> 组 件 和 _renderScene() 逻辑 放 在 顶层 组 件 中 ， 并 把 goHome() 这 样 的 回 
调 函 数 作为 属性 传 到 每 个 场景 中 去 ， 这 样 ， 场 景 本 身 就 不 需要 关心 导航 的 结构 了 。 但 在 这 
里 ， 我 们 把 所 有 导航 相关 的 渲染 逻辑 都 放 在 了 <zebreto> 组 件 里 。 




















假如 想 把 <Navigator> 替换 成 一 些 平台 特定 的 组 件 (例如 <NavigatorI05> 组 件 )， 就 会 变 得 
非常 容易 ， 因 为 它 的 用 法 都 在 这 个 文件 里 (只 需 分 别 创建 Zebreto.ios.js 和 Zebreto.android. 
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js 这 两 个 文件 即 可 )。 即 使 我 们 现在 不 需要 这 么 做 ， 让 导航 更 请 晰 并 从 顶层 组 件 中 隔离 出 
来 也 是 明智 的 做 法 。 
9.4 探索 第 三 方 依 赖 


我 们 也 来 看 看 应 用 中 使 用 的 外 部 类 库 。Zebreto 没有 大 多 的 第 三 方 依赖 ， 但 仍然 会 用 到 一 
些 。 看 一 下 package.json 文件 : 





// package.json 


{ 
"name": "Zebreto", 
"version": "0.0.1", 
"private": true, 
"scripts": { 
"start": "node modules/react-native/packager/packager.sh" 
}, 
"dependencies": { 
"lodash": "^3.10.1", 
"md5": "^2.0.0", 
"moment": "^2.10.6", 
oreact 0.13.3"; 
"react-native": "^0.11.2", 
"refLux": "^0.2.12" 
于 
J 


react-native 和 react 很 显然 是 框架 本 身 ， 我 们 也 已 经 对 reflux 有 所 了 解 。moment 用 来 处 
理 日 期 对 象 ，md5 用 来 计算 卡片 和 分 组 的 ID。 最 后 ，tLodash 提供 了 一 些 实用 的 工具 方法 ， 
我 们 用 它 来 打 乱 卡片 。 























| 





这 些 关 库 都 不 是 React Native 或 移动 设备 自 带 的 ， 但 并 不 要 紧 。 它 们 不 需要 任何 修改 就 可 
以 直接 运行 了 ! 
9.5 响应 式 设计 与 字体 尺寸 


为 了 让 你 的 应 用 良好 地 支持 多 种 设备 ， 你 的 界面 需要 适应 各 种 不 同 尺 寸 的 屏幕 。 在 某 种 程 
度 上 说 ， 基 于 flexbox 的 样式 帮 你 解决 了 这 个 问题 ， 并 且 不 需要 特意 留心 这 些 问题 


















































但 是 ， 字 体 样 式 通常 需要 根据 屏幕 尺寸 精确 地 进行 调整 。 为 了 适应 不 同 设备 的 屏幕 尺寸 ， 
Zebreto 中 的 可 复 用 文本 组 件 会 根据 屏幕 宽度 进行 自动 缩放 (图 9-16)。 
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图 9-16: iPhone 4s 和 iPhone 6 上 字体 尺寸 有 略微 的 区 别 
处 理 不 同 的 字体 尺寸 相当 容易 ， 来 看 看 Zebreto 是 怎样 缩放 字体 的 吧 。 


在 styles/ 目录 下 ， 我 们 从 fonts.js 文件 中 导出 了 字体 相关 的 样式 表 ， 以 及 今后 会 用 到 的 缩 
放 系 数 : 



































// src/styles/fonts.js 
import { StyleSheet } from 'react-native'; 


var fonts = StyleSheet.create({ 
normal: { 
fontSize: 24, 
fontFamily: 'Avenir Medium' 


}, 


alternate: { 
fontSize: 50， 
fontFamily: 'Avenir Heavy ' ， 
color: '#FFFFFF' 


}, 
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big: { 
fontSize: 32, 
alignSelf: 'center', 
fontFamily: 'Avenir Medium' 


} 
}); 


var scalingFactors = { 
normal: 15, 
big: 7 
}; 


module.exports = {fonts, scalingFactors}; 








接着 ， 在 字体 组 件 里 ， 比 如 <NormalText> 组 件 ， 我 们 获取 了 屏幕 的 尺寸 (dimension ) 。 引入 
之 后 ， 就 可 以 使 用 Dimensions 接口 了 : 





import Dimensions from 'Dimensions'; 
let {width, height} = Dimensions.get('window'); 


现在 获得 了 屏幕 尺寸 ， 参 数 存储 在 width 和 height 变量 中 。 











在 <NormalText> 组 件 中 ， 我 们 只 使 用 了 width 值 来 结合 缩放 系数 以 决定 字体 尺寸 : 











var scaled = StyleSheet.create({ 


normal: { 
fontSize: width / scalingFactors.normal 
} 
]); 


然后 ， 在 组 件 里 使 用 这 个 样式 表 : 


// src/components/NormalText.js 


import React from 'react-native’'; 
var { 

StyleSheet, 

Text， 

View 
} = React; 


import {fonts, scalingFactors} from './../styles/fonts’'; 
import Dimensions from 'Dimensions'; 
let {width} = Dimensions.get('window'); 


var NormalText = React.createClass({ 
displayName: 'NormalText', 


propTypes: { 
style: View.propTypes.style 


}, 


render() { 
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return ( 
<Text style={[this.props.style, fonts.normal, scaled.normal]}> 
{this.props.children} 
</Text> 
); 
} 
]); 


var scaled = StyleSheet.create({ 
normal: { 
fontSize: width / scalingFactors.normal 
} 
]); 


export default NormalText; 


搞定 啦 ! <HeadingText> 组件 使 用 了 同样 的 方式 ， 因 此 ， 无 论 什 么 时 候 ， 我 们 在 应 用 的 任 
何 位 置 使 用 <HeadingText> 和 <NormalText> 组 件 ， 它 们 的 字体 都 会 适当 进行 缩放 。 


9.6 小结 及 任务 


Zebreto 应 用 可 以 作为 一 种 参考 。 从 多 方面 来 说 ， 它 只 是 一 个 “最 小 可 用 的 项 目 "， 仍 然 还 
有 很 多 可 以 提升 的 地 方 。 话 虽 如 此 ， 代 码 中 还 是 有 不 少 值得 探索 之 处 ， 建 议 你 可 以 深入 挖 
掘 它们 。 








如 果 想 使 用 React Native 进行 更 多 实践 ， 你 可 以 看 看 GitHub 仓库 ， 然 后 扩展 Zebreto 应 用 。 
你 可 以 从 这 些 想法 开始 : 


。 添加 删除 分 组 的 功能 ; 
。 添加 一 个 可 以 查看 分 组 中 所 有 卡片 的 界面 ; 
。 展示 分 组 中 卡片 熟练 值 的 信息 ; 

。 尝试 不 同样 式 ，; 

。 使 用 ListView 改变 分 组 组 件 。 


下 一 章 将 介绍 如 何 实际 部 署 Zebreto 或 你 自己 的 应 用 到 应 用 商店 中 。 
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第 10 章 


部 署 至 i0$ 应 用 商店 





我 们 已 经 完成 了 一 个 非常 棒 的 应 用 ， 那 么 现在 一 定 迫 不 及 待 地 想 把 它 交 到 用 户 手 中 了 吧 ? 
这 个 步骤 会 根据 平台 而 有 所 不 同 。 本 章 将 集中 介绍 部 署 应 用 到 iOS 应 用 商店 的 详细 步骤 。 


作为 Web 开发 者 ， 我 们 习惯 对 部 署 过 程 有 更 强 的 控制 。 你 可 能 习惯 了 一 天 上 传 多 次 代码 到 
生产 环境 , 并 且 版 本 通常 都 不 是 问题 。 但 部 署 到 iOS 应 用 商店 显然 更 加 复杂 ， 并 且 发 布 新 
版 本 通常 需要 1~2 周 的 审核 时 间 。 因 此 ， 在 计划 阶段 考虑 好 应 用 商店 的 提交 和 审核 过 程 变 
得 尤为 重要 。 





10.1 准备 Xcode 工程 


Xcode 项 目 中 包含 了 许多 关于 应 用 的 元 数据 。React Native 为 你 默认 设置 了 一 些 参数 ， 但 在 
提交 审核 之 前 ， 我 们 需要 确保 某 些 属性 已 经 设置 正确 。 就 Zebreto 而 言 ， 我 们 的 工程 文件 
位 于 iOS/Zebreto.xcodeproj。 








如 有 果 由 于 某 些 原因 ， 你 还 没有 这 么 做 的 话 ， 请 尽快 把 Xcode 工程 文件 加 入 版 本 控制 。 编 辑 
工程 时 遇 到 Xcode 骨 涡 ， 导 致 工程 文件 处 于 糟糕 的 状况 ， 这 类 事件 也 不 是 没有 耳闻 。 


在 Xcode 中 打开 工程 (图 10-1)。 你 需要 打开 左面 板 ， 并 关闭 右面 板 和 下 面板 (在 右上 角 
进行 控制 )。 
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10-1: 在 Xcode 中 打开 你 的 工程 


10.1.1 


选择 支持 的 设备 和 目标 ijOS 版 本 


你 需要 决定 你 的 工程 是 以 哪个 iOS 版 本 为 目标 的 。 


里 有 两 个 独立 但 是 相 





让 人 困惑 的 是 ， 这 


关 的 设置 : Base SDK Version (基础 SDK 版 本 ) 和 iOS deployment target (iOS 部 署 目标 ) 。 
默认 情况 下 ，React Native 设置 部 署 目标 为 7.0， 并 使 用 最 新 的 iOS SDK (9.0)。 部 署 目 
标 指 的 是 运行 你 的 应 用 需要 的 最 小 的 iOS 版 本 ， 而 SDK 版 本 决定 了 你 的 应 用 会 基于 哪个 


SDK 版 本 进行 构建 。 这 些 设 置 的 区 别 参 





我 们 目前 只 需要 记 住 Base SDK Version 外 


如 果 你 正在 使 用 某 些 需要 比 默 认 设置 更 
设置 ， 可 以 在 工程 的 Info 菜 刁 














和 中 修改 (图 


见 Apple 文档 (http://apple.co/IMVKVc3)。 
需要 大 于 或 等 于 iOS deployment target 即 可 。 


高 版 本 的 iOS 接口 ， 你 需要 正确 地 修改 部 署 平台 的 
10-2) 。 











| 鳃 | < 镶 zebreto 
| PROJECT 
Vv Deployment Target 
加 zebreto 
| TARGETS iOS Deployment Target 7. 
的 Zebreto 


Info Build Settings 


0 








10-2: 选择 目标 iOS 版 本 
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如 果 你 想 更 新 Base SDK 的 版 本 ， 可 以 在 Build Settings 菜单 中 指定 (图 10-3 ) 。 











| 加 Info Build Settings 
PROJECT Basic Levels 一 Q 
加 zebreto 
TARGETS: v Architectures 
@ Zebreto Setting 国 zebreto 
四] zebretoTests Additional SDKs 
bP Architectures Standard architectures (armv7, arm64) - $(ARCHS_STANDARD) 人 
Debug Latest iOS (iOS 9.0) 0 
Release Latest iOS (iOS 9.0) ¢ 
Y Build Active Architecture Only <Multiple values> 人 
Debug Yes? 
Release No$ 
Supported Platforms ioSso 
Valid Architectures arm64 armv7 armv7s 











10-3: 修改 Base SDK 版 本 


如 果 在 TARGETS 下 选择 了 你 的 应 用 而 不 是 PROJECT 的 话 ， 你 也 可 以 指定 应 用 支持 的 设 
备 和 屏幕 方向 。 也 就 是 说 ， 对 于 iOS 项 目 而 言 ， 你 可 以 指定 应 用 为 适用 于 iPhone、 适 用 于 
iPad 或 者 通用 ， 通 用 意味 着 可 以 同时 支持 iPad 和 iPhone 设备 (图 10-4)。 











曲 |《 四 zebreto 《 和 
加 General Capabilities Resource Tags Info Build Settings Build Phases Build Rules 
PROJECT VY Deployment Info 
色 Zebreto 
Ere Deployment Target 
入 Zebreto Device; v iPhone 》 
iPad 
站 ZebretoTests Main Interfac Universal 9 


Device Orientation Portrait 
Upside Down 
Landscape Left 
Landscape Right 


Status Bar Style ，Default 


田 


_ Hide status bar 
Requires full screen 











10-4: 设置 设备 目标 
选择 支持 的 设备 之 后 ， 我 们 就 可 以 继续 设置 启动 图 像 和 应 用 图 标 了 。 











10.1.2 ”启动 界面 图 像 
启动 界面 图 像 是 用 户 启动 你 的 应 用 之 后 的 加 载 过 程 中 出 现 的 占 位 图 片 。 这 里 有 多 种 适合 的 
方法 。 有 些 采用 “内 屏 ” 的 做 法 ， 并 附带 该 应 用 的 logo 和 名 称 。 还 有 其 他 一 些 模仿 应 用 的 









































A 
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用 户 界面 ， 但 是 不 带 任何 数据 ， 实 现 了 无 颖 过 
论 你 采用 哪 种 方式 ， 都 需要 提供 所 有 支持 设备 的 相应 尺寸 的 启动 界 [ 
首先 ， 我 们 选择 工程 的 Image.xcassets/ 目录 ， 然 后 创建 一 个 


渡 的 效果 。 











异 








图 








TI 








新 的 图 像 集 人 


像 。 
图 10-5)。 
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图 10-5: 添加 启动 图 像 








图 片 。 


在 这 里 ， 你 可 以 添加 适应 每 个 设备 尺寸 的 启动 图 像 (图 10-6)， 





因此 我 们 需要 提供 不 少 
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10-6: 为 每 个 设备 尺寸 和 屏幕 方向 提供 启动 图 像 


所 需 的 图 片 尺寸 因 设备 而 不 同 。 例 如 ，iPhone 6 的 纵向 模式 需要 750 x 1334 像素 的 文件 ， 
而 横向 模式 需要 1334 x 750 像素 的 文件 。 


特定 平台 所 需 的 尺寸 参见 Apple 文档 (http://apple.co/1HaVNmb) 的 说 明 。 如 果 你 提供 了 错 
误 尺 寸 的 文件 ，Xcode 会 给 出 警告 ， 所 以 也 可 以 利用 警告 来 引导 你 。 











10.1.3 添加 应 用 图 标 

应 用 图 标 会 展现 在 用 户 设备 的 主 界面 下 ， 也 会 显示 在 应 用 商店 里 。 就 像 启动 界面 一 样 ， 你 
需要 提供 适应 支持 设备 正确 尺寸 的 图 标 文件 ， 可 以 在 Apple 文档 查看 尺寸 (http://apple. 
co/1HaVNmb ) 。 






























































Apple 的 人 机 界面 指南 给 出 了 一 些 基 本 的 指导 。 应 用 图 标 应 该 不 包含 任何 透明 区 域 ， 并 且 
必须 为 方形 〈Apple 自动 帮 你 在 图 标 上 添加 圆 角 效果 ， 无 需 自 己 制作 )。 








就 像 之 前 设置 启动 图 像 一 样 ， 选 择 Image.xcassets/ 目录 之 后 ， 点 击 加 号 按钮 。 但 是 这 次 ， 
我 们 选择 创建 一 个 应 用 图 标 (图 10-7)。 


























10-7: 添加 图 标 到 工程 中 
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医 


标 。 








你 可 将 文件 拖 放 到 右边 ， 把 它们 添加 为 
日 ， 然 后 重新 安装 ， 那 么 应 该 可 以 看 到 应 用 图 标 ， 如 图 


9 























如 果 你 从 模拟 器 或 设备 删除 了 应 月 
10-8 所 示 。 

















Carrier 全 
"_ 


Game Center Extras Zebreto 


Safari 














图 10-8: 设置 定制 图 标 并 重新 安装 之 后 ， 你 可 以 在 主 界面 看 到 图 标 ， 开 发 阶段 也 能 生效 





























如 果 由 于 某 些 原因 ， 你 的 启动 图 像 或 应 用 图 标 没 有 正确 泻 染 的 话 ， 务 必 检 查 App Icons 和 
Launch Images 菜单 下 的 设置 ， 你 可 以 在 General 设置 菜单 下 找到 它们 (图 10-9)。 
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10-9: 双击 App lcons Source 和 Launch Images 源 文件 


10.1.4 设置 Bundle 名 称 
工程 的 Bundle 名 称 决 定 了 你 的 应 用 在 用 户 设 备 上 将 会 显示 的 名 称 ， 所 以 非常 重要 。 


注意 ， 在 重 命名 的 时 候 Xcode 可 能 会 卡 住 ， 这 有 可 能 会 损坏 你 的 工程 文件 。 所 以 在 使 用 
Xcode 的 重 命名 功能 之 前 ， 请 确保 你 的 工程 文件 已 经 加 入 到 版 本 控制 系统 中 。 


我 们 可 以 在 右面 板 的 Identity and Type 里 查看 并 修改 名 称 (图 10-10)。 这 个 名 称 是 在 你 运 
行 react-native init 的 时 候 自动 设置 的 ， 如 果 你 想 修改 它 ， 就 趁 现在 吧 。 
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BD zobroto 


Bundle ldentifer com.zebreto.Zebreto 





Version 10 


Buld 1 











10-10: Identity and Type 菜单 下 的 名 称 是 面向 用 户 的 


10.1.5 ”更 新 AppDelegate.m 

回想 一 下 AppDelegate.m 文件 的 作用 ， 该 文件 中 有 两 种 指定 JavaScript 代码 位 置 的 方法 : 
从 打包 的 文件 加 载 ， 或 通过 localhost 加 载 。 在 开发 期 间 运 行 React Native 包 管 理 器 是 推荐 
的 做 法 ， 但 对 部 署 来 说 ， 需 要 生成 一 个 打包 之 后 的 JavaScript 文件 。 














第 一 个 选项 使 用 localhost， 我 们 将 其 注释 ， 然 后 启用 第 二 个 选项 ， 从 打包 文件 加 载 代 码 : 





// jsCodeLocation = 
// [NSURL URLWithstring:@"http://Llocalhost:8081/index.ios.bundle"]; 


jsCodeLocation = [[NSBundle mainBundle] 
URLForResource:@"main" withExtension:@"jsbundle"]; 


搞定 之 后 ， 我 们 需要 生成 打包 文件 。 
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在 项 目 目录 运行 : 





react-native bundle --minify 





我 们 需要 确保 这 样 修改 之 后 还 可 以 在 模拟 器 运行 。 重 启 模拟 器 ， 然 后 尝试 运行 应 用 ， 它 应 
该 能 如 常 运行 。 


10.1.6 为 发 布设 置 Schema 


接着 ， 我 们 需要 将 Build Scheme 设置 为 Release， 而 不 再 是 Debug。 如 图 10-11 所 示 ， 找 到 
Product 一 Scheme 一 Edit Scheme.… 菜单 选项 。 





or BE Debug Source Control Window Help 倪 己 美 
un Run $6R 
a Test BEU 外 
《 Profile 381 
Analyze 个 3HB 王 
Gel Jrce Tags Info Build Settings E 
RO | 
图 Build For p ity 
a Perform Action ls 
ARG Bundle Identifier com.zebreto.Zebreto 
区 Build 6B | 
= Clean 个 只 KK Version 1.0 
-stop $8. Build |1 
Select Next Scheme 个 6] 
Destination p Select Previous Scheme 人 ^¥[ 后 
Create Bot... V Zebro 
| | React 
: RCTActionSheet 
RCTGeolocation 
RCTImage 
RCTLinking 
RCTNetwork 
1! RCTSettings 
RCTText 
RCTVibration 
RCTWebSocket 
Edit Scheme... $< 
New Scheme... 


Manage Schemes... 








图 10-11: 选择 Edit Scheme... 选项 
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然后 修改 项 目的 Schema 为 Release (图 10-12)。 



































@ zebro ) lagomorphical 
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2 targets 
Run 大 
Build Configuration ， Release 
就 Executable -人 M Zebreto.app 
Debug 
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pe Profile 
Release Debug Process As “ 
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Release Wait for executable to be launched 
Sm | 
Duplicate Scheme Manage Schemes... Shared | 








10-12: 设置 Build Configuration 为 Release 并 取消 勾 选 Debug executable 





这 样 修改 之 后 ， 意 味 着 运行 应 用 时 调试 菜单 就 不 会 再 出 现 了 。 


10.2 上传 应 用 


好 了 ， 既 然 你 的 项 目 已 经 正确 配置 成 发 布 状态 了 ， 现 在 是 时 候 把 它 提交 到 Apple 应 用 商 
店 了 ! 


10.2.1 完成 协议 文书 
如 果 没 有 Apple 开发 者 账号 是 不 能 提交 到 应 用 商店 的 ， 所 以 如 果 你 还 没有 注册 ， 现 在 可 以 
行动 了 ! 申请 账号 的 价格 是 每 年 99 美元 。 











此 外 ， 如 果 你 以 前 申请 过 的 话 ， 现 在 也 需要 签署 更 多 的 新 协议 。 与 此 相关 的 错误 提示 信息 
有 时 候 很 难 理解 ， 如 图 10-13 所 示 。 
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An unspecified error occurred. 

The selected team's agent, 'Bonnie Eisenman' must 
agreeto the latest Program License Agreement. Please 
visit the Member Center. 
https://developer.apple.com/membercenter 














图 10-13: 如 果 看 到 此 类 错误 ， 先 党 试 遵循 提供 的 指示 


不 幸 的 是 ， 有 时 候 访 问 特定 的 网 址 (https://developer.apple.com/membercenter) 也 会 出 现 类 
似 的 错误 ， 如 图 10-14 所 示 。 








The selected team's agent，'Bonnie Eisenman' | 
must agree to the latest Program License 
Agreement. Please visit the Member Center. 
https://developer.apple.com/membercenter 





| cancel | 区 到 


T DNA TA4 




















图 10-14: 如 果 你 看 到 此 类 错误 ,访问 iTunes Connect 并 检查 是 否 有 未 完成 的 协议 





如 果 碰 到 这 类 问题 ， 先 访问 iTunes Connect (https://itunesconnect.apple.com/) ， 而 不 是 会 员 
中 心 。 选 择 Agreements,Tax,and Banking， 然 后 填写 所 有 未 完成 的 表格 。 


10.2.2 ”创建 归档 


下 一 步 需 要 做 的 是 创建 应 用 的 归档 ， 创 建 归档 后 才能 提交 至 应 用 商店 。 你 可 以 在 
Product 一 Archive 菜单 里 找到 它 。 
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如 果 Archive 菜单 显示 为 灰色 禁用 状态 (如 图 10-15 所 示 )， 那 么 很 可 能 是 因为 你 选择 了 
iOS 模拟 器 作为 构建 目标 。 


" Product | Debug Source CI 


Ba 











ia Run 6R 
=- Test 8U 外 
《 Profile 96| 
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Jy1 














图 10-15: 如 果 Archive 选项 被 禁用 ， 尝 试 修改 构建 目标 





将 工程 的 构建 目标 修改 为 iOS 设备 之 后 ， 就 可 以 在 菜单 上 选择 Archive 选项 了 (图 10-16)。 
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10-16: 选择 Product 一 Archive， 开 始 创建 归档 
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如 果 顺 利 的 话 ， 将 会 出 现 Archive 的 界面 (图 10-17) 。 
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Details 
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本 Version 1.0() 上 
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Download dSYMs... | 
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图 10-17: 选择 一 个 归档 ， 上 传 至 应 用 商店 


作 好 准备 点 击 Upload to the App Store 的 按钮 了 吗 ? 快 行动 吧 ! Xcode 将 最 后 进行 一 些 检 
查 ， 然 后 你 的 应 用 就 被 提交 到 Apple 应 用 商店 了 (图 10-18 ) 。 





Archives Crashes 





Send Zebro to Apple: 
po Zebro.ipa 
WM Signing Identity: iPhone Distribution: Bonnie Eisenman (3K855BVGNM) 
Binary and Entitlements Provisioning Profile 
> @ Zebreto.app (5 Entitlements) XxC:* © 





Include app symbols for your application to receive symbolicated crash logs from Apple. Learn More 


Include bitcode. Learn More 


Cancel Previous 




















图 10-18: 点 击 Submit 按钮 ， 上 传 归档 至 应 用 商店 
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10.2.3 在 iTunes Connect 上 创建 应 用 

如 果 你 觉得 已 经 大 功 告 成 了 ， 那 么 很 抱歉 告诉 你 ， 依 然 还 有 工作 要 做 ! 你 的 应 用 归档 已 经 
被 上 传 了 ， 但 你 现在 需要 通过 iTunes Connect 开始 真正 的 提交 。 这 个 过 程 包 括 提交 一 些 重 
要 的 关于 应 用 的 元 数据 信息 ， 例 如 应 用 描述 和 屏幕 截图 ， 这 些 都 是 呈现 给 用 户 的 。 




















想 要 获取 该 流程 的 更 多 深入 的 信息 ， 可 以 在 Apple 文档 (http://apple.co/1S6zsXq) 中 查看 
关于 如 何 创建 Tunes Connect 记录 的 相关 内 容 。 








首先 ， 你 需要 在 开发 者 中 心 (http://apple.co/1INLquel) 注册 一 个 App ID。 这 个 表格 需要 你 
输入 应 用 的 Bundle Identifier (图 10-19)。 











了 Identity 


Bundle Identifier com.zebreto.Zebreto 
Version 1.0 


Build 1 











10-19: 在 Xcode 中 设置 Bundle Identifier 


此 处 的 信息 需要 跟 你 的 Xcode 项 目 中 的 Bundle Identifier 保持 一 致 〈 在 Identity 菜单 下 )， 
如 图 10-20 所 示 。 








App ID Suffix 


© Explicit App ID 
lf you plan to incorporate app services such as Game Center, In-App Purchase, Data 
Protection, and iCloud, or want a provisioning profile unique to a single app, you must 
register an explicit App ID for your app. 


To create an explicit App ID, enter a unique string in the Bundle ID field. This string 
should match the Bundle ID of your app. 


Bundle ID: com.zebreto.Zebreto 


We recommend using a reverse-domain name style string (i.e., 


com.domainname.appname). It cannot contain an asterisk (*). 














10-20: 开发 者 中 心 的 Bundle ID 需要 匹配 Xcode 中 的 Bundle Identifier 
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Bundle Identifier 


如 果 你 的 Bundle Identifier 不 匹配 ， 那 么 就 不 能 把 应 用 归档 和 iTunes Connect 
中 的 记录 联系 起 来 。 请 仔细 检查 一 下 | 





接 下 来 ， 我 们 在 iTunes Connect (https://itunesconnect.apple.com/) 上 创建 一 个 新 的 应 用 
(图 10-21)。 














iTunes Connect My Apps ~ 
下 


New iOS App 


New Mac App 











图 10-21: 在 iTunes Connect 上 选择 New iOS App 来 创建 一 个 新 的 应 用 

















Bundle Identifier 再 一 次 出 现 了 ， 选 择 合 适 的 那个 ， 然 后 继续 创建 应 用 。 








如 果 应 用 归档 已 经 成 功 上 传 ， 那么 可 以 在 iTunes Connect 看 到 构建 的 项 目 (图 10-22 ) 。 





由 Chrome File Edit View History Bookmarks People Window Help 





时 冲 甘 世 区 3 辐 申 令 局 10% Mon8:35AM QQ 注 
© upoadngapuidtoranp x) CunesConnect x 由 Register -iOSAppIDs-A X | 由 TransteringandDeleting; X AtiasDocumentation x Personal 
© A AppleInc [US] https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/ra/ng/app/1037901489/activity/ios/builds “ 马 @2 国 = 

iTunes Connect M = ? 






@ zebreto Flash Cards 


App Store 











Activity 
iOS Builds 
AlBuids 
App Store We 
Version 1.0 
Buld Upload Date External Testing Status App 
@ 1 Sep 7, 2015 at 5:52 PM 


Ready for Sale 











10-22: 应 用 归档 上 传 之 后 ， 会 出 现在 构建 项 目 列表 中 
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如 有 果 你 没有 看 到 任何 构建 项 目 ， 请 检查 下 列 事项 。 


。 _ iTunes Connect 中 的 Bundle ID 是 否 与 Xcode 项 目 保 持 一 致 ? 
。 在 上 传 归档 时 ，Xcode 是 否 有 出 现任 何 错误 ? 
。 如 果 重 新 上 传 应 用 归档 ,会 有 什么 反应 ? 


现在 ， 在 iTunes Connect 中 你 可 以 输入 应 用 商店 列表 相关 的 信息 (例如 正确 的 分 类 和 描述 ， 
等 等 )。 这 里 有 很 多 信息 需要 填写 ， 别 着 急 。 


重要 的 是 : 这 个 页 面 也 可 以 让 你 上 传 屏幕 截图 和 应 用 漫游 的 视频 。 提 供 高 质量 的 屏幕 截图 
是 使 你 的 应 用 在 应 用 商店 里 脱颖而出 的 关键 举措 。 通 常 你 需要 为 不 同 设备 提供 相应 尺寸 的 
屏幕 截图 (图 10-23 ) 。 








@B zebreto Flash Cards Version 1.0 


App Video Preview and Screenshots ? 
5.5-Inch | 4-nch | 3.5-nch | iPad 


Camier 全 16 PM - Camier 全 4:17 PM m Camier 令 4:17 PM 





@ ZEBRETO @ ZEBRETO @ ZEBRETO 
ee Front: 
der Vogel 





Back: 


der Vogel 





Create Card 


Correct! Next card? 














图 10-23: 上 传 屏幕 截图 


iOS 模拟 器 上 的 屏幕 截图 


使 用 iOS 模拟 器 可 以 轻松 获得 适合 尺寸 的 屏幕 截图 。 加 载 每 一 种 设备 ， 然 后 
按 下 快捷 键 Command+S， 就 可 以 保存 一 张 屏幕 截图 了 。 
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10.3 ”使 用 TestFlight 进 行 Beta 测 试 


在 提交 应 用 商店 审核 之 前 ， 你 应 该 使 用 TestFlight 进行 Beta 测试 。 即 使 你 是 唯一 的 一 个 
“Beta 测试 者 ”， 使 用 TestFlight 而 不 是 开发 模式 下 的 应 用 ， 可 以 让 你 更 精准 地 把 握 你 的 应 
用 初次 安装 到 用 户 设备 时 的 使 用 体验 。 


TestFlight 可 以 让 你 轻松 地 发 送 测试 洲 请 给 。 在 iTunes Connect 上 的 申请 记录 下 面 ， 
选择 TestFlight， 然 后 添加 Beta 测试 者 (图 1 你 需要 提供 他 们 的 电子 邮件 地 址 。 









































E Bonnie Eisenman v | 万 
iTunes Connect My Apps ~ @ zebreto Flash Cards Bonnie Eisenman 2 
App Store Features TestFlight Activity App Analytics & Sales and Trends 
External Testing » 
Internal Testing Test your builds with anyone using the TestFlight app. Builds may need approval from Beta App Review 
External Testing 
iOS Add Build to Test 
iOS 


External Testers (0) 四 


Add at least 1 external tester. 


Copyright © 2015 Apple Inc. Al rights reserved. 











10-24: iTunes Connect 中 的 TestFlight 界面 


你 的 Beta 测试 者 初次 使 用 时 需要 安装 TestFlight 应 用 。 当 他 们 接收 到 测试 应 用 的 邀请 后 ， 
TestFlight 会 给 他 们 显示 安装 应 用 的 选项 (图 10-25)。 成 功 安装 之 后 ， 应 用 就 可 以 正常 运 
行 了 。 
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eeeee Verizon 会 并 8:46 AM @ 7 * 93% i eeeee Verizon 全 8:47 AM @ 17 * 93% 区 天 


《 Search 和信 YY 《TestFlight 
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pW Zebreto Flash 
Card 
cae 


Zebreto Flash Cards 1.0 Information 


(1 ) Bonnie Eisenman 
Sep 7, 2015 
1.0 (1) 
Bonnie Eisenman has invited you 1.7 MB 
to test Zebreto Flash Cards for E Oct 7, 2015, 5:54 PM 
iIOS. Requires iOS 7.0 or later. 


Compatible with iPod touch, 
iPhone, and iPad. 
You can accept this invitation with the Apple 
ID that you are currently using. Your Apple ID 
and the email address to which the invite was Notifications 
sent don't have to match. 
To accept this invitation, you must have 
TestFlight installed on your iOS device. Stop testing 


Open in TestFlight © 


= Ne 











图 10-25:， Beta 测试 者 通过 TestFlight 接收 邀请 邮件 ， 然 后 安装 应 用 


10.4 提交 应 用 审核 


当 你 得 到 了 Beta 测试 者 满意 的 反馈 ， 并 且 已 经 填写 了 iTunes Connect 上 的 相关 信息 之 后 ， 
现在 你 (终于! ) 可 以 提交 应 用 审核 了 。 提 交 之 后 ，iTunes Connect 将 会 标识 你 的 应 用 状 
态 为 “等 待 审核 ”( 图 10-26 ) 。 



































图 灵 社 区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 











Zebreto Flash 


Cards 


© 1.0 Waiting For Review 








10-26: 应 用 状态 可 在 iTunes Connect 上 查看 














应 用 进入 审核 流程 后 ， 审 核 的 每 一 环 市 你 都 会 收 到 邮件 提醒 ， 无 论 是 被 拒绝 还 是 被 接纳 。 
平均 来 说 ， 应 用 商店 的 审核 流程 大 概 是 1~2 周 ， 但 不 好 说 你 的 应 用 审核 需要 多 少时 间 。 如 
果 恰 着 一 年 之 中 繁忙 的 时 段 ， 如 市 假日 ， 审 核 周 期 可 能 会 相应 延长 。 





























这 里 提供 一 个 参 萎 : Zebreto 应 用 等 待 8 天 之 后 就 被 接纳 了 。 当 你 的 应 用 被 接纳 之 后 ， 祝 损 
你 ， 现 在 可 以 在 应 用 商店 下 载 它 了 。 











10.5 小结 


我 们 辛 辛 苦 苦 完成 了 应 用 ， 将 它 交 付 给 用 户 的 那 一 刻 一 定 很 振奋 人 心 吧 ? 然而 发 布 应 用 只 
是 一 个 开始 ， 因 为 你 需要 不 断 支持 应 用 的 后 续 发 布 。 部 署 应 用 不 像 在 Web 平台 上 那样 频 
繁 且 易于 操作 ， 发 布 iOS 的 新 版 本 需要 花费 时 间 ， 并 且 它 有 更 长 的 寿命 。 许 多 iOS 用 户 没 
有 开启 自动 升级 ， 所 以 每 一 个 版 本 都 很 重要 。 至 少 你 每 次 提交 更 新 或 修复 bug 都 需要 等 待 
Apple 的 审核 。( 对 于 非常 严重 的 bug， 你 可 以 申请 加 急 ， 但 要 谨慎 使 用 这 个 功能 ! ) 





























部 署 至 iOSs 应 用 商店 | 201 
图 灵 社区 会 员 lliw(447917757@qq.com) 专 享 尊重 版 权 











此 外 ，iOS 应 用 的 发 布 从 评分 的 角度 来 看 有 些 风 险 。 展 示 在 应 用 商店 页 面 上 的 评论 是 基于 
当前 版 本 的 ， 而 不 是 整体 的 评分 ， 所 以 如 果 发 布 了 一 个 有 bug 的 版 本 ， 那 么 将 很 可 能 为 你 


的 应 用 带 来 很 大 的 负面 影响 。 记 住 ， 测 试 很 关键 





如 果 你 有 新 版 本 要 提交 的 话 ， 流 程 跟 最 初 上 传 的 流程 非常 相似 。 在 Xcode 中 增加 你 的 应 用 





版 本 号 ， 然 后 提交 一 个 新 的 归 





选项 。 





档 











。 你 可 以 在 iTunes Connect 上 找到 提交 审核 新 构建 版 本 的 














本 章 已 经 介绍 了 如 何 提交 应 用 至 ioOg 应 用 商店 ， 下 一 章 我 们 将 把 视线 转移 到 Android 平台 ， 


并 操作 相似 的 流程 。 
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第 11 章 


部 署 Android 应 用 





终于 到 这 一 步 了 ! 准备 好 部 署 Android 应 用 然后 交 到 用 户 手中 了 吗 ? 如 果 你 已 经 体验 过 
iOS 应 用 的 提交 疲 程 ， 那 么 这 里 的 步骤 会 很 相似 。 不 过 值得 庆 季 的 是 ，Play 商店 的 审核 流 
程 会 更 简单 ， 审 核 速度 也 会 更 快 : 你 只 需要 等 待 1~2 个 工作 日 就 可 以 知道 审核 结果 。 




















本 章 将 介绍 如 何 生 成 React Native 应 用 的 部 署 版 的 APK， 以 及 如 何 将 其 分 发 给 Beta 测试 者 
并 提交 至 Goole Play 商店 审核 。 


查看 文档 
这 里 我 们 会 作 一 个 关于 部 署 Android 应 用 的 详细 指导 ， 但 请 把 官方 文档 


(https://facebook.github.io/react-native/docs/signed-apk-android.html) 作为 最 新 
的 流程 参考 。 





11.1 设置 应 用 图 标 


虽然 Android 自 带 的 图 标 挺 可 爱 的 ， 但 你 在 部 署 之 前 一 定 想 换 成 自己 定制 的 应 用 图 标 。 








在 android/app/src/main/AndroidManifest.xml 文件 里 指定 应 用 图 标 : 











android:icon="@mipmap/ic_launcher" 





文件 路 径 指向 了 android/app/src/main/res/ 目录 。 第 3 章 已 经 介绍 过 ，Android 图 像 资源 根据 分 
辨 率 放置 在 不 同 目录 下 。 图 标 文件 也 一 样 ， 你 会 发 现 这 里 已 经 放置 了 默认 的 图 标 (图 11-1)。 


| 
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res 

mipmap-hdpi 

[一 ic_Launcher.png 
mipmap-mdpi 

[一 ic_Launcher.png 
mipmap-—xhdpi 

[一 ic launcher.png 
mipmap—-xxhdpi 

[一 ic launcher.png 
mipmap—-xxxhdpi 

[一 ic launcher.png 








11-1: 应 用 图 标 文件 的 目录 结构 





可 以 直接 替换 这 些 文件 ， 或 在 AndroidManifest.xml 文件 中 修改 图 标 路 径 。 在 设备 上 重新 安 
装 应 用 之 后 ， 就 可 以 看 到 新 的 图 标 了 (图 11-2)。 

















加 记 久 日 


Calendar Camera Clock Contacts 


国芳 @ 
ee" 


Custom Locale Dev Settings Dev Tools Downloads 


“ 昌 3© 


Email Gallery Gestures Build. Music 


《人 尽 家 二 


Phone Search Settings Widget Preview 


Zebreto 














图 11-2: 查看 已 安装 的 应 用 ， 现 在 可 以 看 到 Zebreto 定制 的 图 标 
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创建 不 同 分 辩 率 的 图 标 听 起 来 可 能 有 些 枯燥 ， 我 们 不 妨 使 用 工具 来 生成 适合 的 尺寸 。 我 
个 人 是 romannurik 项 目的 拥护 者 (https://romannurik.github.io/AndroidAssetStudio/icons- 


launcher.html) 。 


11.2 生成 release 版 本 的 APK 


为 了 部 署 Android 应 用 ， 我 们 需要 生成 release 版 本 的 APK (APK 文件 是 Android 应 用 安 
装 包 文 件 ， 该 格式 用 于 发 布 Android 应 用 )。 通 常 来 讲 ， 有 5 个 基本 步骤 ， 


(1) 生成 签名 窗 钥 ， 

(2) 设置 gradle 变量 ， 

(3) 添加 签名 到 应 用 的 gradle 配置 中 ， 
(4) 生 成 release 版 本 的 APK; 

(5) 在 设备 上 安装 release 版 本 的 APK。 





我 们 将 会 逐一 讲解 这 些 步骤 。 你 可 以 阅读 Android 官方 的 发 布 概要 (http://developer. 
android.com/tools/publishing/publishing_overview.html) 来 获得 更 多 信息 。 

首先 ， 需 要 为 你 的 应 用 生成 一 个 签名 密 钥 。 

你 可 以 使 用 keytool 来 生成 一 个 keystore ( 密 钥 对 ) 和 key ( 密 钥 ) : 


$ keytool -genkey -v -keystore my-release-key.keystore \ 
-alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 
Android 文档 (http://developer.android.com/tools/publishing/app-signing.html) 中 有 更 多 关于 
应 用 签名 的 说 明 。Android 使 用 证 书签 名 来 识别 应 用 的 作者 。 不 要 忘记 密码 ， 也 不 要 丢失 
密 钥 。 同 时 具备 这 两 个 信息 才能 对 应 用 进行 升级 。 


之 前 的 命令 将 会 生成 一 个 my-release-key.keystore 文件 。 将 它 移动 到 项 目的 android/appy/ 目 
录 下 。 








接着 ， 新 建 或 编辑 ~/.gradle/gradle.properties 文件 并 添加 如 下 代码 ， 如 例 11-1 所 示 。 





例 11-1: 添加 这 些 变量 到 ~/.gradle/gradle.properties 文件 中 
MYAPP_RELEASE_STORE_FILE=my-reLease-key.keystore 
MYAPP_RELEASE KEY_ALIAS=my-key-alias 
MYAPP_RELEASE_STORE_PASSWORD=***** 
MYAPP_RELEASE_KEY_PASSWORD=***** 


然后 把 星 号 替换 成 之 前 调用 keytool 时 使 用 的 密码 。 


在 ~/.gradle/gradle.properties 文件 中 添加 这 些 信息 之 后 ， 我 们 就 成 功 地 把 它们 加 入 到 gradle 
通用 配置 中 了 ( 记 住 ，gradle 是 用 来 构建 React Native 项 目的 工具 )。 
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保管 好 密 钥 





千 万 不 要 把 你 的 密 钥 密 码 加 入 到 版 本 控制 中 ， 也 不 要 丢失 密 钥 ! 在 发 布 应 用 
之 后 ， 如 果 你 使 用 了 一 个 新 的 密 钥 ， 那 么 会 刷新 Play 商店 上 的 数据 ， 所 有 的 
下 载 统计 和 评论 也 会 因此 而 丢失 。 




















现在 我 们 已 经 设置 好 了 gradle 变量 ， 接 着 需要 把 我 们 的 签名 配置 添加 到 应 用 的 gradle 配置 
中 。 打 开 android/app/build.gradle 文件 ， 然 后 添加 如 下 签名 配置 〈 例 11-2) 。 





例 11-2: 修改 android/app/build.gradle 
android { 
defaultConfig { ... } 
signingConfigs f{ 
release { 

storeFile file(MYAPP_RELEASE_ STORE_FILE) 
storePassword MYAPP_RELEASE_STORE_PASSWORD 
keyAlias MYAPP_RELEASE_KEY_ALIAS 


keyPassword MYAPP_RELEASE_KEY_PASSWORD 
} 


buildTypes { 
release { 


signingConfig signingConfigs.release 
} 
} 
} 
注意 ， 这 里 使 用 了 之 前 在 ~/.gradle/gradle.properties 文件 中 定义 的 变量 。 


好 了 ! 现在 开始 生成 签名 版 的 APK。 





进入 项 目 根 目录 ， 在 终端 运行 React Native 包 管 理 器 


$ npm start 








然后 在 根 目 录 再 次 运行 下 列 命令 














$ mkdir -p android/app/src/main/assets 

$ curL \ 

"localhost:8081/index.android.bundle?platform=android&dev=false&minify=true" \ 
-0 "android/app/src/main/assets/index.android.bundle" 

$ cd android && ./gradlew assembleRelease 





哇 ! 这 里 发 生 了 什么 ? 首先， 我们 新 建 了 一 个 assets/ 目录 来 存储 打包 的 JavaScript 文 
件 。 然 后 ， 通 过 curl 从 React Native 包 管理 器 获取 了 打包 的 JavaScript 文件 。 最 后 ， 使 用 
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gradlew 来 构建 release 版 本 的 APK。 


React Native 团队 已 经 指出 ， 这 个 流程 可 能 会 在 将 来 的 React Native 中 有 所 
改动 ， 因 为 使 用 curl 从 某 个 特定 URL 获取 文件 的 方式 并 不 是 最 直观 的 。 记 
住 ， 永远 以 官方 文档 为 准 (https://facebook.github.io/react-native/docs/signed- 
apk-android.html ji 

















接 下 来 ， 你 可 以 关闭 React Native 包 管 理 器 。 打 包 的 JavaScript 文件 已 经 被 保存 到 硬盘 中 了 。 











在 项 目的 android/ 目录 下 ， 运 行 下 面 的 命令 来 安装 签名 版 的 APK: 
./gradlew installRelease 
这 个 命令 将 会 安装 签名 版 的 APK 到 你 的 设备 中 。 


永远 记得 在 部 署 之 前 测试 你 的 应 用 。 开 始 的 时 候 ， 可 以 使 用 gradlew installRelease 命令 
上 传 这 个 APK 到 模拟 器 或 连接 的 物理 设备 中 。 


11.3 通过 邮件 或 链接 发 布 


你 知道 吗 ? 实际 上 ， 将 应 用 发 布 给 Android 用 户 不 一 定 需要 上 传 到 Play 商店 。 在 必要 的 时 
候 ， 或 者 为 了 测试 ， 你 可 以 直接 通过 电子 邮件 将 APK 发 布 给 用 户 。 在 Android 设备 上 打开 
电子 邮件 就 可 以 安装 了 。 




















你 的 APK 文件 位 于 android/app/build/outputs/apk/app-release.apk。 你 可 以 通过 检查 下 列 文件 
存在 与 否 来 判断 release 版 本 的 APK 是 否 已 经 成 功 构建 : 


$ ls android/app/build/outputs/apk/ 
app-debug-unaligned.apk app-debug.apk 
app-release-unaligned.apk app-release.apk 


通过 邮件 将 这 个 文件 发 布 给 用 户 ， 可 以 让 他 们 下 载 并 安装 应 用 。 事 实 上 ， 用 户 在 任何 地 方 


注意 : 首先 需要 允许 从 未 知 来 源 来 装 应 用 。 查 看 “Android 关于 未 知 来 源 的 文档 ”获取 更 
多 信息 (http://developer.android.com/tools/publishing/publishing_overview.html#unknown-sources)。 


11.4 提交 应 用 至 Play 商店 


在 真实 设备 上 〈 如 果 可 能 的 话 ， 在 多 个 设备 上 ) 测试 release 版 本 的 APK 一 段 时 间 之 后 ， 
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你 打算 将 它 部 署 到 Google Play 商店 。 那 就 开始 吧 ! 
这 个 过 程 相 当 容 易 ， 并 且 审 核 速度 也 很 快 ， 通 常 可 以 在 提交 之 后 的 24 小 时 之 内 部 署 成 功 。 


进入 http://developer.android.com 网 站 ， 然 后 在 页 面 右 上 角 点 击 Developer Console 按钮 
(图 11-3)。 








€ DC developerandroid.com/index.html 六 人 必 围 三 


Design Develop Distribute E> ee Q 





3 
! 叫 ! Developers 








pAValelrello eA TleS NT ee 


Android 6.0 SDK is now available! 


earn more 


> Getthe SDK > Browse Samples > Watch Videos 











图 11-3: 从 http://developer.android.com 进入 Developer Console 


如 果 你 还 没有 开发 者 账号 ， 先 申请 一 个 ， 然 后 接受 Google 所 有 的 条 款 。 接 着 ， 点 击 左 侧 
菜单 上 的 Android 图 标 来 查看 应 用 菜单 。 


点 击 +Add new application 按钮 ， 创 建 应 用 (图 11-4)。 











所 ?YC 9 hnttps//playgoogle.com/apps/publish/s #AppListPlace 窜 a 0 昂 围 三 
yy Google Play Developer Console a sanot 全 
| % ALAppLicATIONS (EEC ) 
ma 
时 
从 You dont have any applications yet 
四 Add your first application 


EE 


图 11-4: 创建 一 个 新 的 应 用 
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个 选项 。 
上 传 你 的 APK 文件 ， 


android/app/build/outputs/apk/app-release.apk ( 


在 这 里 ， 你 可 以 选择 先 上 传 一 个 APK 文件 ， 或 编辑 你 的 Play Store 列表 。 我 们 选择 其 


中 一 


需要 在 文件 系统 里 找到 release 版 本 的 APK 文件 ， 它 应 i 
图 11-5)。 





支 在 这 里 : 








€ © @ https://play.google.com/apps/publish/?dev_acc= 自 0 有 
* 四 于 Zebreto $ Q 
Favortes Name Date Modifed ~ 
国 Hacking Y BM android Today 9:57 PM 
app Today. 9:57 PM 
RE "uid Togay. 1009PM 
园 Al My Files v MM outputs Today, 10:09 PM 
OO iCloud Drive "apk Today 9:36 PM 
app-debug.apk ™ 
A app-debug-unaligned apk 
国 Desktop app-release-unaligned.apk 
团 Documents CE 
k 
© pownoads 上 a intermediates 
从 bonnie tmp 
国 learning-react-native pe 
国 m-code build.gradie 
| Screenshots my-release-key.keystore 
proguard-nules pro 
Dovices bad 
lodla build.gradle 
» Ba grade 
ee oradle properies 
I Photos gradlew 
图 vores gradlow.bat 
settings.gradle 
Tags index androidjs 
© Red W indexiosjs 
Bs » Ba node_modules 
package json 
Yellow > sre 























图 11-5: 选择 你 的 app-release.apk 文件 


APK 文件 上 传 之 后 


11.4.1 


Google Play 商店 EE 
Testing 选项 卡 ， 然 


， 你 可 以 完成 余下 的 Play Store 表单 ， 或 建立 一 个 Beta 测试 。 





ee Store 进 行 Beta 测 试 


简单 的 Beta 测试 功能 。 上 传 APK 文件 之 后 ， 你 可 以 选择 Beta 
eh Beta 测试 者 (图 11-6)。 








Statistics 


User Acauisition 





Optimization Tips 
Cloud Test Lab 
ApPK 

Siore Listing 
Content Rating 
Pricing & Distribution 
Inapp Products 


Services& APIS 





APK Switch to advanced mode 
PRODUCTION BETA TESTING ALPHA TESTING 
Sot up Beta tosting for A 
1 your app 
MANAGE TESTERS 
Choose how to run your testing program. | carn more Disable Bota Testing 
® CHOOSEATESTING METHOD zh 2 
/ee MM Re 
Th Ther 


Closed Beta Testing Open Beta Testing 


Run a public test where any user can join the program through a 
speciic link. 


Add individual users by email address. Users need to be on your 
test's list of email addresses to join the program. 


Set up Closed Beta Testing Set up Open Beta Testing 


Beta Testing using Google Groups or Google+ Communities 
Users need to be in specified Google Groups or Google+ Communities to join the program. 


Set up Groups or Communities Beta Testing 








图 11-6: Play 商店 的 Beta Testing 选项 
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这 里 你 可 以 有 几 种 选择 。 





。 开放 Beta 测 试 
该 选项 允许 用 户 通过 特定 链接 加 入 测试 。 
。 封闭 Beta 测 试 
该 选项 允许 通过 电子 邮件 地 址 添加 单独 的 用 户 。 





。 通过 Google Groups 或 Google+ 社 区 进行 Beta 测 试 


站 过 
该 选项 允许 特定 的 Google Group 会 员 加 入 Beta 测试 。 





Google 让 你 可 以 轻松 地 发 布 APK 给 这 些 用 户 。 








对 于 Android 平台 而 言 ， 你 需要 把 应 用 分 发 给 尽 可 能 多 的 用 户 。 鉴 于 市 面 上 有 很 多 不 同 的 
Android 设备 ， 这 一 点 其 至 比 iOS 更 为 必要 。 例 如 Zebreto 这 一 使 用 React Native 默认 设置 
的 应 用 ， 在 Play 商店 列表 展示 了 所 兼容 的 7867 种 不 同 的 设备 (图 11-7)。 






































CURRENT APK published on Oct 11, 2015, 7:28:02 PM 


Supported devices 


7867 


See list 











11-7: Play 商店 会 列 出 你 的 应 用 支持 哪些 设备 


不 同 的 设备 有 不 同 的 尺寸 、 分 状 率 以 及 不 同 的 特性 ， 黄 至 不 同 的 样式 。 一 些 制造 商 在 
Android 默认 的 UI 上 定制 了 他 们 自己 的 皮肤 。 所 以 ， 好 好 利用 Beta 测试 功能 吧 ! 











11.4.2 ”Play 商店 列表 


你 的 Play 商店 列表 包含 了 你 的 应 用 的 重要 信息 〈 例 如 名 称 、 描 述 、 类 别 和 内 容 分 级 ， 等 
等 )。 为 了 发 布 应 用 ， 你 需要 填写 其 中 的 大 部 分 信息 。 

















点 击 Why can”t I publish? 链接 ，Developer Console 将 会 帮助 你 列 出 需要 完成 的 余下 的 任务 
(图 11-8)。 
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€ 3 CC Bntps/playgoogle.com/apps/publish/?dev_ace: pkPlace:p=com zebreto 


WHY CANT | PUBLISH? 


[English (United States) - en-US] 
ic. [English (United States) - em-US] 








You need to solect a category 

You need to select a content rating. 

You need to add a short description, [English (United States) ~ en-US] 
You need to add a full description. [Engllsh (Unted States) -en-US] 
You need to acknowledge that this application meets the Content Guldelines 








You need to complete the points below before you can publish your application. 


] 
ndrold TV screenshots. [English (United States) - en 


You need to acknowledge that this application complies with US export laws. 





图 11-8: 在 发 布 前 需要 完成 余下 的 任务 


你 完成 某 项 所 需 的 任务 之 后 ， 左 侧 菜单 的 对 号 将 会 
后 ，Publish app 按钮 就 会 被 激活 。 





11.4.3 商店 列表 所 需 的 资源 











你 需要 上 传 一 些 图 片 资源 (图 11-9) 作为 Play 商店 列表 的 一 部 分 ， 











。 至 少 两 张 应 用 截 
。 一 张 512 x 512 像素 的 PNG 格式 的 应 用 图 标 ; 
。 一 张 1024 x 500 像素 的 JPG 或 PNG 格式 的 “ 功 





琴 











变 成 绿色 。 


包括 : 


EE 图片 ”给 Play 商店 。 


完成 所 有 必要 的 步骤 之 





€ C&C A htps://play.google.com/apps/publish/?dev_acc= 





| 和 PK STORE LISTING 
页] sone 
English (United States) - en-US Manage translations Y 

Content Rating 
地 
Pi & Distributi 

9 Hi-res lcon* Feature Graphic * 

办 Detault — English (United States) ~ en-US. «Default — Englsh (United States) — en-US 

mepp Pn S12x512 1024 wx500h 

32-bit PNG (wih alpha JPG or 24-blt PNG (no alpha) 

A | sevoos&APls 


Ophmization Tips 


下 
站 
1/ 


TV Banner 
Detaull - English (United States) -en-US 


wx180h 
JPG or 24-blt PNG (no alphal 


Promo video 
Default ~ English (United States) -en-US 
YouTube video 

; 





MarketListingPlace:p=com.zebreto 


Promo Graphic 

Default - English (United States) - en-US 
180 wx 120h 

JPG or 24-bit PNG (no alpha) 


Mad promo oraphic 


Drop mage hore. 








图 11-9: 上 传 图 片 至 Play 商店 列表 
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还 有 一 些 其 他 的 可 选 图 像 ， 如 推广 图 片 和 推广 视频 。 
记 住 ， 这 些 资源 非常 关键 ， 可 以 帮助 你 的 应 用 在 Play 商店 中 脱颖而出 ! 


如 果 你 还 设 有 屏幕 截图 ， 那 么 是 时 候 去 准备 几 张 了 。 有 两 个 选择 : 可 以 从 物理 设备 获取 ， 
或 者 从 模拟 器 获取 截图 。 同 时 按 下 物理 设备 上 的 “电源 键 ” 和 “音量 减 小 键 ”就 可 以 获取 
一 张 屏幕 截图 。 





















































从 模拟 器 获取 屏幕 截图 可 能 有 些 复杂 。 首 先 ， 需 要 确保 已 经 为 模拟 器 分 配 了 一 个 SD 卡 用 
来 储存 文件 (你 可 以 运行 android avd， 然 后 点 击 Edit 按钮 查看 模拟 器 的 详细 信息 )。 

















接着 ,使 用 adb shell 获取 屏幕 截图 : 











adb shell screencap -p /sdcard/screen.png 
adb pull /sdcard/screen.png 
adb shell rm /sdcard/screen.png 


这 些 命令 将 会 获取 一 张 屏幕 截图 ， 然 后 把 它 保存 在 本 地 文件 系统 中 。 

















如 果 你 更 喜欢 单行 的 方式 ， 可 以 试 试 下 面 的 命令 : 











adb sheLL screencap -p | perl -pe 's/\xOD\xOA/\x0A/g' > screen.png 


这 个 命令 将 会 复制 你 的 屏幕 截图 到 本 地 文件 系统 的 screen.png 文件 中 。 


11.4.4 ”发 布 应 用 


准备 好 发 布 应 用 了 吗 ? 如 图 11-10 所 示 ， 点 击 Publish app 按钮 | 























Zebreto 
1 com.zebreto 
READY TO PUBLISH Publish app 


图 11-10: 发 布 你 的 应 用 至 Play 商店 
提交 应 用 审核 之 后 ， 你 的 应 用 状态 将 会 变 成 “等 待 ”(Pending)， 如 图 11-11 所 示 。 











注 1: 单行 的 方式 经 由 shvestov's blog 提供 ， 如 果 你 对 我 们 为 什么 使 用 Perl 感到 好 奇 ， 可 以 打开 网 站 看 看 : 
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€ 3$ CI|6 htps//playgoogle.com/appa/publish/?dev_acc=: 涛 MarketListingPlace:p=com.zebreto 交 | 5 人 为 转 三 
x 





We're processing your update. It can take several hours until it is available throughout Google Play. 

ES SO EA es Ee 

| 前 
pA Zebreto 
a 众 Ce Processing update 
/ . y Submit update 
PENDING PUBLICATION bw 
尽 
Sik STORE LISTING 
让 








图 11-11: 应 用 等 待 审核 
一 般 来 说 ， 你 会 在 24 小 时 之 内 收 到 结果 。 然 后 ， 你 的 应 用 就 可 以 通过 Play 商店 提供 给 公 
众 用 户 了 ， 视 贺 你 ! 结果 如 图 11-12 所 示 。 最 后 ， 完 整 版 的 Android 应 用 已 经 发 布 成 功 ， 
你 可 以 尽情 沉浸 在 喜悦 中 了 。 


Zebreto 
Bonnie Eisenman Education 
到 Everyone 
1/ ©@ This app is compatible with your device. 
Add to Wishlist ED 


上 53072 状 s | 
ZEBRETO ZEBRETO ZEBRETO 


eemasdue 图] Front: 
aa the dog 


Create Deck 
证 > 
Greate Gard 
Stop Reviewing 























图 11-12: Zebreto 应 用 出 现在 Play 商店 中 
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11.5 “小 结 


至 此 ， 你 应 该 能 够 发 布 React Native 应 用 到 Google Play 商店 和 iOS 应 用 商店 了 ! 





总 体 而 言 ，Android 应 用 的 发 布 流 程 相 比 于 iOS 应 用 商店 更 为 简洁 。 但 是 就 像 :OS 平台 一 
样 ， 成 功 部 署 应 用 只 是 一 个 开始 ， 你 需要 计划 对 应 用 后 续 版 本 的 支持 。 并 且 与 iOS 平台 相 
同 的 是 ， 你 不 能 指望 用 户 为 应 用 开启 自动 升级 。 此 外 Android 用 户 有 一 系列 的 不 同 标 准 的 
设备 ， 因 此 Android 平台 上 每 个 版 本 的 用 户 测试 都 至 关 重 要 。 























214 | 第 11 章 
图 灵 社 区 会 员 省 w(447917757@qq.com) 专 享 尊重 版 权 








已 经 读 到 这 里 了 ， 祝 虎 你 ! 


我 们 从 第 一 个 React Native 应 用 的 开发 开始 ， 一 路 “过 关 斩 将 ”， 最 后 分 别 成 功 部 署 了 跨 
平台 的 应 用 到 iOS 应 用 商店 和 Google Play 商店 。 为 了 完成 这 项 任务 ， 我 们 从 基础 的 React 
Native 组 件 和 样式 开始 学 起 ， 然 后 学 习 了 触摸 和 平台 原生 接口 ， 比 如 Camera Roll (相机 ) 
和 Geolocation 地 理 接 口 。 我 们 还 掌握 了 通过 开发 者 工具 进行 React Native 调试 的 技巧 以 
及 部 署 应 用 到 真实 设备 的 方法 。 对 于 React Native 标准 库 之 外 的 功能 ， 我 们 也 了 解 了 原生 
Objective-C 和 Java 模块 的 用 法 ， 以 及 如 何 通 过 npm 安装 第 三 方 JavaScript 类 库 。 









































你 所 具备 的 JavaScript 和 React 的 知识 ， 再 加 上 本 书 中 所 讨论 的 内 容 ， 应 该 足以 让 你 快 
速 且 高 效 地 开发 出 适用 于 Android 和 iOS 平台 的 跨 平 台 应 用 了 。 当 然 ， 只 拥有 这 些 知 识 
还 远 远 不 够 ， 你 仍 需 要 不 断 学 习 ， 单 单 这 一 本 书 并 不 能 涵盖 React Native 移动 应 用 开发 
的 方方面面 。 如 果 你 遇 到 困难 或 者 问题 ， 可 以 向 社区 求助 ， 例 如 Stack Overflow (http:// 


stackoverflow.com/questions/tagged/react-native) 或 IRC (irc:Wchat.freenode.netreactnative ) 。 




















让 我 们 保持 联络 吧 ! 加 入 Learning React Native (http:Wlearningreactnative.com) 的 邮件 
列表 ， 可 以 获取 更 多 关于 本 书 的 资源 和 更 新 。 你 也 可 以 在 Twitter 上 找到 我 : @brindelle 
(http://twitter.com/brindelle ) 。 








最 后 也 最 重要 的 是 ， 享 受 这 一 切 ! 期 待 看 到 你 们 的 优秀 作品 ! 
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附录 人 





ES6 语 法 


书 中 的 一 些 代码 使 用 了 广为人知 的 ES6 语法 。 如 果 你 对 ES6 语法 不 熟悉 的 话 也 不 要 紧 ， 
基本 上 是 从 你 熟悉 的 JavaScript 语法 直接 翻译 过 来 的 。 


ES6 指 的 是 ECMAScript 6， 也 被 称 作 Harmony， 是 ECMAScript 的 下 一 代 标 准 ，JavaScript 
是 ECMAScript 的 具体 实现 。 命 名 约定 的 背后 有 很 多 有 趣 的 历史 ， 但 你 只 需要 知道 : ES6 


它 


是 一 个 JavaScript 的 新 版 本 ， 并 且 在 继承 了 现 有 规范 的 前 提 下 还 引入 了 一 些 实用 的 新 特性 。 











React Native 使 用 Babel (https://babeljs.io/) 这 个 JavaScript 编译 器 来 转换 我 们 的 JavaScript 


和 JSX 代码 。Babel 的 一 个 特点 是 将 ES6 语法 编译 成 符合 ES5 规范 的 JavaScript 代码 ， 
此 我 们 可 以 在 React 代码 中 使 用 ES6 语法 。 


A.1 解构 


解构 赋值 (https:/developer.mozilla.org/en-US/docs/Web/JavaScripUVReference/Operators/ 


Destructuring_assignment) 给 我 们 提供 了 一 个 从 对 象 提 取 数 据 的 简便 的 方法 。 
这 是 符合 ES5 规范 的 代码 片段 : 

var my0bj = {a: 1, b: 2}; 

var a = my0bj.a; 

var b = my0bj.b; 
我 们 可 以 使 用 更 简洁 的 解构 赋值 : 


var {a, b} = {a: 1, b: 2}; 
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大 








你 可 能 经 常 在 require 语句 中 看 到 它 的 身影 。 在 引入 React 的 时 候 ， 实 际 上 我 们 取出 了 一 
个 对 象 ， 并 使 用 例 A-1 的 方法 来 获得 组 件 。 





例 A-1: 非 解 构 语 法 导入 <View> 组 件 
var React = require('react-native'); 
var View = React.View 


但 使 用 解构 语法 会 让 代码 更 加 优雅 ， 如 例 A-2 所 示 。 
例 A-2: 解构 语法 导入 <View> 组 件 


var { View } = require('react-native'); 


A.2 导入 模块 


一 般 情况 下 ， 我 们 使 用 CommonJS 模块 的 语法 导出 组 件 以 及 其 他 一 些 JavaScript 模块 ( 例 
A-3)。 在 该 模块 系统 中 ， 我 们 使 用 require 语句 导入 其 他 模块 ， 使 用 module.exports 赋值 
的 方法 导出 代码 供 其 他 模块 使 用 。 


例 A-3: 使 用 CommonJS 语法 导入 和 导出 模块 


var OtherComponent = require('./other_component'); 









































var MyComponent = React.createClass({ 
]); 


moduLe.exports = MyComponent; 





在 ES6 的 语法 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/ 
import) 中 ， 我 们 采用 export 和 import 关键 字 来 奉 代 。 例 A-4 展示 了 使 用 ES6 模块 语法 编 
写 的 等 效 代 码 。 


例 A-4: 使 用 ES6 模块 语法 导入 和 导出 模块 


import OtherComponent from './other_component'; 
var MyComponent = React.createClass({ 


DD; 


export default MyComponent; 


A.3 函数 简写 


ES6 的 函数 简写 也 是 很 实用 的 。 在 符合 ES5 规范 的 JavaScript 中 ， 我 们 用 例 A-5 所 示 的 方 
法 来 声明 函数 。 
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例 A-5: 普通 函数 的 声明 方式 
render: function() { 
return <Text>Hi</Text>; 


} 
重复 使 用 function 关键 字 会 让 人 厌倦 。 例 A-6 展示 了 使 用 ES6 函数 简写 的 方式 编写 的 相 
同 的 函数 。 
例 A-6: 函数 简写 的 声明 方式 


render() { 
return <Text>Hi</Text>; 


) 


A.4 ”箭头 函数 


在 ES5 版 本 的 JavaScript 中 ， 为 了 确保 函数 的 上 下 文 〈 即 this 的 值 ) 符合 预期 ， 我 们 通常 
会 使 用 bind 函数 ( 例 A-7)。 这 种 方法 在 处 理 回调 函数 的 时 候 尤 为 常见 。 


例 A-7: 使 用 ES5 的 JavaScript 手动 绑 定 函数 


var callbackFunc = function(val) { 
console.log('Do something'); 
}.bind(this); 














箭头 函数 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_ 
functions) 实现 了 自动 绑 定 ， 因 此 我 们 不 需要 手动 处 理 ( 例 A-8)。 


例 A-8: 使 用 箭头 函数 实现 绑 定 
var callbackFunc = (val) => { 
console.log('Do something'); 


和 


A.5 字符 串 插 值 


在 ES5 版 本 的 JavaScript 中 ， 我 们 使 用 例 A-9 这 样 的 代码 来 实现 字符 串 拼 接 。 

















例 A-9: ES5 版 本 的 JavaScript 字符 串 拼 接 


var API_KEY = 'abcdefg'; 
var url = 'http://someapi.com/request&key=' + API_KEY; 











ES6 为 我 们 提供 了 模板 字符 串 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/ 
Reference/Template_literals) ， 它 支持 多 行 字符 串 以 及 字符 串 插 值 。 通 过 一 对 反 引 号 把 字符 
串 围 起 来 ， 我 们 就 可 以 使 用 $f} 语法 插入 其 他 变量 了 〈 例 A-10)。 


例 A-10: ES6 的 字符 串 播 值 


var API_KEY = 'abcdefg '; 
var url = “http://someapi.com/request&key=${API_KEY}; 
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附录 B 





命令 与 快速 入 门 指南 


该 附录 可 以 作为 React Native 快捷 命令 的 参考 。 


B.1 创建 一 个 新 项 目 


react-native init MyProject 


B.2 ”在 iOS 上 运行 











动 React Native 包 管 理 器 和 iOS 模拟 器 。 


iOS 屏 幕 截 图 








在 物理 设备 中 ， 同 时 按 下 “电源 键 ” 和 “主键 ”也 可 以 进行 屏幕 截 


B.3 在 Android 上 运行 
首先 ， 确 保 你 已 经 连接 了 可 识别 的 设备 。 


通过 如 下 命令 运行 模拟 器 : 
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在 iOS 模拟 器 上 按 下 快捷 键 Command+S 就 可 以 将 屏幕 截图 保存 到 桌面 上 。 





图 。 


在 Xcode 中 打开 ios/MyProject.xcodeproj 文件 ， 然 后 在 左上 和 角 点 击 运行 按钮 ， 可 以 同时 局 
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android avd 





创建 一 个 新 的 Android 虚拟 设备 (Android Virtual Device，AVD) 或 选择 一 个 存在 的 设备 
并 点 击 Start... 按钮 。 


另 一 种 方式 是 在 物理 设备 上 开启 USB 调试 ， 然 后 通过 USB 连接 到 电脑 上 。 通 过 设备 上 
的 “设置 一 关于 手机 一 版 本 号 ”菜单 来 开启 USB 调试 (USB debugging)。 多 次 重复 点 击 
“版 本 号 ”选项 ， 直 到 设备 询问 是 否 开启 开发 者 模式 ， 然 后 选择 “确定 ”。 


完成 上 述 步 又 后 运行 : 





























react-native run-android 


该 命令 将 会 在 设备 上 安装 你 的 应 用 ， 同 时 也 会 启动 React Native 包 管 理 器 。 

















Android 屏 幕 截 图 
你 可 以 在 物理 设备 上 同时 按 下 “电源 键 ” 和 “音量 减 小 键 ”来 截取 屏 


在 模拟 器 上 截取 屏幕 : 需要 确保 你 的 模拟 器 已 经 启用 了 “SD 卡 存储 ”选项 。 然 后 运行 adb 


命令 : 



































adb shell screencap -p /sdcard/screen.png 
adb pull /sdcard/screen.png 
adb shell rm /sdcard/screen.png 


或 者 使 用 下 面 这 个 更 简洁 的 命令 : 














adb sheLL screencap -p | perl -pe 's/\xOD\xOA/\x0A/g' > screen.png 


B.4 运行 React Native 包 管理 器 


如 果 你 由 于 某 些 原因 需要 手动 启动 React Native 包 管理 器 的 话 ， 可 以 直接 进入 项 目的 根 目 
录 ， 然 后 运行 : 























npm start 
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作者 简介 

Bonnie Eisenman 是 Twitter 公司 的 软件 工程 师 ， 曾 就 职 于 Codecademy、Google 和 Fog 
Creek Software 公司 。 她 曾 在 多 个 会 议 上 作 过 演讲 ， 话 题 涉及 React、 音 乐 编程 和 Arduino。 
工作 之 余 ， 她 乐于 开发 电子 乐器 ， 喜爱 使 用 激光 切割 巧克力 ， 并 且 热 爱 学 习 各 种 语言 。 





关于 封面 
本 书 封 面 上 的 动物 是 环 尾 袋 狠 (学 名 : Pseudocheirus peregrinus) ， 是 澳洲 土生 土 长 的 有 党 
类 动物 。 环 尾 袋 铬 是 食 草 类 动物 ， 主要 居 住 在 森林 地 区 。 它 因 卷 曲 的 、 末 闸 经 常 呈 环 状 的 
尾巴 而 得 名 。 





环 尾 袋 狠 外 表 是 灰 棕 色 的 ， 体 长 可 达 35 厘米 。 它 以 各 式 各 样 的 叶子 、 花 采 和 水 果 为 食 。 
环 尾 袋 铬 是 夜行 性 动物 ， 并 群居 在 寻 穴 中 。 作 为 有 袋 类 动物 ， 环 尾 袋 用 会 把 它们 的 幼 吕 置 
于 袋 中 ， 直 到 幼 串 长 大 ， 可 以 独立 生存 。 


20 世纪 50 年 代 ， 环 尾 裳 狠 数 量 骤 减 ， 好 在 近年 来 数量 又 有 所 增加 。 但 由 于 森林 砍伐 ， 它 
们 的 栖息 地 仍然 受到 威胁 。 


O’Reilly 书籍 封面 上 的 许多 动物 都 属于 濒危 物种 ， 它 们 都 是 这 个 世界 不 可 或 缺 的 一 部 分 。 
想 知 道 如 何 帮 助 这 些 动物 的 话 ， 请 访问 http://animals.oreilly.com。 


本 书 封面 图 片 来 自 Shaw”s Zoology。 
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OREILLY 





React Native 开 发 指南 


自 2015 年 春天 Facebook 开 源 React Native 以 来 ，React Native 就 凭借 其 强大 
的 可 扩展 性 、 良 好 的 用 户 体 验 以 及 可 拥有 原生 外 观 等 优势 得 到 开发 者 的 
关注 和 青睐 。 


本 书 是 一 本 实践 指南 ， 从 基础 知识 入 手 ， 逐 步 深 入 ， 带 领 读 者 部 署 可 
1009% 代 码 复 用 的 、 成 熟 的 跨 平台 移动 应 用 。 作 者 通过 示例 代码 向 Web 开 
发 者 和 前 端 工程 师 展 示 了 如 何 使 用 移动 组 件 构建 界面 并 编写 样式 ， 以 及 
如 何 调试 和 部 署 应 用 。 除 了 框架 本 身 的 讲解 ， 作 者 还 探讨 了 如 何 使 用 第 
三 方 库 ， 以 及 如 何 编写 自己 的 Java 或 者 Objective-C 的 React Native 扩 展 。 


四 了解 React Native 如 何 开放 原生 UI 组 件 接口 

目 类 比 HTML 元 素 ， 了 解 该 框架 如 何 使 用 原生 组 件 

罩 创建 自己 的 React Native 组 件 和 应 用 ， 并 为 它们 编写 样式 
目 为 该 框架 不 支持 的 API 和 功能 安装 第 三 方 模块 

国 使 用 工具 来 调试 代码 ， 并 解决 JavaScript 之 外 的 问题 

加 整合 所 学 知识 ， 开 发 一 款 高 效 记 忆 闪 卡 应 用 一 一 Zebreto 
利 部 署 应 用 至 i0S 应 用 商店 和 Google Play 商店 


Bonnie Eisenman，Twitter 公 司 软 件 工 程 师 ， 曾 就 职 于 Codecademy、 


Google 和 Fog Creek Software 公 司 。 她 曾 在 多 个 会 议 上 作 过 演讲 ,话题 涉及 
React、 音 乐 编程 和 Arduino。 
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“Bonnie 在 书 中 讲解 了 React 


Native 最 重要 的 知识 ， 帮 助 你 
建立 扎实 的 开发 基础 ! 认真 研 
读本 书后 ， 你 将 拥有 足够 的 信 
心 继续 去 探索 并 学 习 更 多 的 知 
人 
一 一 Brent Vatne 
Exponent 开 发 者 ， 
React Native 核 心 贡献 者 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨 论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 
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